/* 登入、選角、建角：照搬單機版 idle-lineage-class css/style.css（2026-10-16）的這幾段，只改圖檔路徑：
   /public-assets/ → /public-assets/（server.mjs 唯讀提供單機版 public/assets）、assets/ → /assets/。
   原檔行號：1063-1180 登入（不含開遊戲載入條）、1253-1383 建角、1385-1561 選角。網頁版自己加的放在最後。 */

/* ===== 登入首頁：login.webp 直式底圖（576×1024），按鈕與提示字以百分比疊在圖上的位置 =====
   桌機/手機同一套：舞台照圖片比例縮放到「整張放得進視窗」，四周補黑。
   高度扣 --orig-bar-h：afk-banner（不可停用）讓開非官方橫幅後 #creation-screen 會變矮。
   首頁只留開始遊戲：外掛往 #main-menu／舞台塞的入口（查詢、小百科、設定、公告…）一律藏起來；
   左上角「外掛開關」逃生門掛在 body 上，不受影響。 */
#creation-screen { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; background:#050505; }
#creation-screen.hidden { display:none !important; }
/* 刪除角色確認窗(遊戲內視窗，不用原生 prompt：部分 App 內瀏覽器會擋原生對話框) */
#load-delete-dialog { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.65); }
#load-delete-dialog .ldd-box { width:min(calc(var(--vw1, 1vw) * 92), 360px); padding:18px; box-sizing:border-box; border:1px solid rgba(190,150,80,.6); border-radius:10px; background:#120f0b; color:#e8dcc0; font-family:"Microsoft JhengHei", sans-serif; font-size:15px; line-height:1.5; box-shadow:0 10px 40px rgba(0,0,0,.7); }
#load-delete-dialog .ldd-msg { margin:0 0 8px; }
#load-delete-dialog .ldd-warn { margin:0 0 8px; color:#ef8f84; }
#load-delete-dialog .ldd-input { width:100%; height:40px; box-sizing:border-box; margin:2px 0 14px; padding:0 10px; border:1px solid rgba(160,140,105,.6); border-radius:6px; background:#070605; color:#f2ead6; font:inherit; outline:none; }
#load-delete-dialog .ldd-input:focus { border-color:rgba(226,190,110,.9); }
#load-delete-dialog .ldd-actions { display:flex; gap:10px; }
#load-delete-dialog .ldd-actions button { flex:1 1 0; height:42px; border-radius:6px; font:inherit; font-weight:700; letter-spacing:.1em; cursor:pointer; }
#load-delete-dialog .ldd-cancel { border:1px solid rgba(160,140,105,.6); background:#1d1812; color:#e8dcc0; }
#load-delete-dialog .ldd-ok { border:1px solid rgba(190,80,70,.8); background:#5a1d17; color:#ffd9d4; }
#load-delete-dialog .ldd-ok:disabled { opacity:.4; cursor:not-allowed; }
#creation-screen #login-art-stage { position:relative; width:min(calc(var(--vw1, 1vw) * 100), calc((calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px)) * 576 / 1024)); height:auto; min-height:0; aspect-ratio:576 / 1024; flex:0 0 auto; margin:auto; display:block; overflow:hidden; background:#050505; box-shadow:0 0 45px #000; container-type:inline-size; }
#creation-screen #login-bg-image { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; opacity:1; pointer-events:none; user-select:none; }
#creation-screen #login-art-stage > :not(#login-bg-image):not(#login-form):not(.login-field-hint):not(.login-scroll-note):not(.login-deco):not(.login-remember):not(.login-register):not(.login-line):not(.login-msg):not(.login-slash):not(#main-menu) { display:none !important; }
/* ── 登入畫面裝飾（站長 2026-10-14）：上方 logo＋背景劍的光芒。全部不吃點擊，位置都是對 login.webp(576×1024) 量的百分比 ── */
.login-deco { position:absolute; inset:0; pointer-events:none; user-select:none; }
.login-deco > * { position:absolute; }
/* logo：上排小字、下排大「天堂」；金色漸層字＋後面一層深色描邊與暗影（不用 filter：iPhone 會把字糊掉） */
.login-logo { left:0; right:0; top:3.2%; display:flex; flex-direction:column; align-items:center; font-family:"Noto Serif TC","Songti TC","PMingLiU","MingLiU",serif; font-weight:900; line-height:1; }
.login-logo .ll-sub { font-size:4.6cqw; letter-spacing:.35em; padding-left:.35em; margin-bottom:1.4cqw; color:#ead6a2; text-shadow:0 0 .6cqw #000,0 .3cqw .9cqw #000,0 0 2cqw #000; }
/* 本體＝深色描邊＋暗影那一層；::after 疊在上面畫金色漸層字（漸層裁成字形只能用 background-clip:text，它跟 text-shadow 不能放同一層） */
.login-logo .ll-main { position:relative; font-size:17cqw; letter-spacing:.08em; padding-left:.08em; color:#24170a; -webkit-text-stroke:1cqw #24170a; text-shadow:0 0 2.2cqw rgba(0,0,0,.95),0 .6cqw 1.2cqw #000,0 0 5cqw rgba(255,190,80,.45); }
.login-logo .ll-main::after { content:attr(data-t); position:absolute; inset:0; padding-left:.08em; -webkit-text-stroke:0; text-shadow:none; color:transparent; background:linear-gradient(#fffbe8 0%,#f5d888 34%,#b47c22 54%,#f8df92 70%,#8c5c16 100%); -webkit-background-clip:text; background-clip:text; }
/* 劍：遮罩只露出劍身（sword-mask.png 由背景圖描出來），裡面一道斜光由左往右掃過，掃完停一下 */
.login-sword-fx { left:46.007%; top:13.574%; width:36.458%; height:16.309%; overflow:hidden; -webkit-mask:url(/public-assets/login/sword-mask.png) 0 0/100% 100% no-repeat; mask:url(/public-assets/login/sword-mask.png) 0 0/100% 100% no-repeat; }
.login-sword-fx::before { content:""; position:absolute; top:-60%; bottom:-60%; left:-60%; width:50%; background:linear-gradient(90deg,rgba(255,248,225,0) 0%,rgba(255,248,225,.45) 30%,rgba(255,255,255,1) 50%,rgba(255,248,225,.45) 70%,rgba(255,248,225,0) 100%); transform:rotate(25deg); animation:loginSwordSheen 3s ease-in-out infinite; }
@keyframes loginSwordSheen { 0% { left:-60%; } 75%, 100% { left:115%; } }   /* 掃 2.25 秒、停 0.75 秒 */
/* 護手上的紅寶石：慢慢亮暗 */
.login-gem { left:62.79%; top:23.05%; width:11cqw; height:7cqw; margin:-3.5cqw 0 0 -5.5cqw; border-radius:50%; background:radial-gradient(closest-side,rgba(255,90,70,.75),rgba(255,40,30,.25) 55%,rgba(255,0,0,0)); animation:loginGem 3.2s ease-in-out infinite; }
@keyframes loginGem { 0%, 100% { opacity:.25; } 50% { opacity:1; } }
/* 刀刃與護手尖端的星芒：光掃過時閃一下 */
.login-glint { width:9cqw; height:9cqw; margin:-4.5cqw 0 0 -4.5cqw; background:radial-gradient(closest-side,#fff,rgba(255,255,255,.6) 18%,rgba(255,255,255,0) 45%); opacity:0; transform:scale(0) rotate(20deg); animation:loginGlint 3s ease-out infinite; }
.login-glint::before, .login-glint::after { content:""; position:absolute; background:radial-gradient(closest-side,#fff,rgba(255,255,255,0)); }
.login-glint::before { left:0; right:0; top:46%; bottom:46%; }
.login-glint::after { top:0; bottom:0; left:46%; right:46%; }
.login-glint.lg1 { left:47.6%; top:19.6%; animation-delay:.3s; }
.login-glint.lg2 { left:57.5%; top:27.2%; animation-delay:1s; }
@keyframes loginGlint { 0% { opacity:0; transform:scale(0) rotate(20deg); } 8% { opacity:1; transform:scale(1) rotate(65deg); } 18%, 100% { opacity:0; transform:scale(0) rotate(110deg); } }
/* ── 登錄動畫（站長 2026-10-15）：按登錄 → 劍從信紙後面直接劈開（不抬劍）→ 轉暗進選角色（js/00z playLoginSlash）──
   座標全是對 login.webp(576×1024) 量的；1 圖片 px = 0.17361cqw。平常整組 visibility:hidden（圖照樣預載）。
   ls-patch＝擦掉原劍的背景補丁；ls-sword＝獨立劍圖（縮 0.8、轉 -12° 後跟圖上的劍重合，旋轉中心＝紅寶石）；
   ls-half＝兩份背景沿斜線裁成信紙上下兩半（劈開時分開），ls-hole 墊在最底下蓋住圖上原本的信紙。
   劍與刀光全程在信紙後面（站長：劍從信紙後面砍出來），信紙裂開時從縫裡看到劍；只有裂痕的光在信紙前面。 */
.login-slash { position:absolute; inset:0; z-index:40; pointer-events:none; visibility:hidden; }
#login-art-stage.slashing .login-slash { visibility:visible; pointer-events:auto; }
#login-art-stage.slashing .login-sword-fx, #login-art-stage.slashing .login-gem, #login-art-stage.slashing .login-glint, #login-art-stage.slashing > .login-scroll-note { visibility:hidden; }
.login-slash > * { position:absolute; user-select:none; }
.ls-patch { left:26.042%; top:12.207%; width:64.236%; height:17.578%; z-index:1; }
.ls-dim { inset:0; z-index:2; background:#000; opacity:0; }
.ls-sword { left:1.344%; top:15.02%; width:86.25%; height:44.22%; z-index:4; transform-origin:71.85% 18.375%; transform:translate(0,0) rotate(-12deg) scale(1); will-change:transform; }
.ls-hole { left:9.549%; top:29.004%; width:87.673%; height:38.379%; z-index:3; background:radial-gradient(ellipse at 50% 45%, #0d0e11 0%, #050506 75%); opacity:0; }
.ls-half { inset:0; z-index:5; transform-origin:52% 48%; }
.ls-half > img { position:absolute; inset:0; width:100%; height:100%; }
.ls-a { clip-path:polygon(9.549% 29.004%, 80.38% 29.004%, 27.08% 67.383%, 9.549% 67.383%); }
.ls-b { clip-path:polygon(80.38% 29.004%, 97.222% 29.004%, 97.222% 67.383%, 27.08% 67.383%); }
.ls-trail { left:-3cqw; top:-49.2cqw; width:182cqw; height:182cqw; z-index:4; border-radius:50%; opacity:0;
  background:conic-gradient(from 218deg, rgba(255,250,230,.55) 0deg, rgba(255,250,230,0) 55deg, transparent 55deg);
  -webkit-mask:radial-gradient(circle, transparent 74%, #000 84%, #000 96%, transparent 100%); mask:radial-gradient(circle, transparent 74%, #000 84%, #000 96%, transparent 100%); }
.ls-cut { left:80.38cqw; top:51.56cqw; width:86.6cqw; height:.9cqw; margin-top:-.45cqw; z-index:8; transform-origin:0 50%; transform:rotate(128deg) scaleX(0); border-radius:1cqw;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff 12%, #fff 88%, rgba(255,255,255,0)); box-shadow:0 0 2cqw 1cqw rgba(255,236,170,.85); opacity:0; }
.ls-flash { left:63.3cqw; top:41.15cqw; width:120cqw; height:120cqw; margin:-60cqw 0 0 -60cqw; z-index:9; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,240,.95), rgba(255,240,200,.45) 35%, rgba(255,240,200,0)); opacity:0; }
/* 轉場黑幕掛在 body（選角色面板蓋上來時還要留著淡出） */
#login-slash-black { position:fixed; inset:0; z-index:9000; background:#000; opacity:0; pointer-events:none; }
/* 圖上羊皮紙卷軸的空白處：寫公告（目前是測試指令說明） */
.login-scroll-note { position:absolute; left:24%; width:52%; top:33%; height:29%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6cqw; text-align:center; color:#3b2a17; font-family:"Noto Serif TC","PMingLiU",serif; font-size:4.2cqw; line-height:1.55; pointer-events:none; user-select:none; }
.login-scroll-note b { font-size:5.4cqw; letter-spacing:.2em; color:#5a1d10; margin-bottom:1.5cqw; }
.login-scroll-note code { font-family:inherit; font-weight:700; color:#5a1d10; }
.login-scroll-note .lsn-sell { display:flex; flex-direction:column; align-items:center; margin-bottom:2cqw; }
.login-scroll-note .lsn-rates { display:flex; flex-direction:column; align-items:center; margin-bottom:1cqw; padding:1cqw 3cqw; border-top:1px solid rgba(90,29,16,.35); border-bottom:1px solid rgba(90,29,16,.35); }
.login-scroll-note .lsn-rates[hidden] { display:none; }
.login-scroll-note .lsn-rates span { display:flex; flex-wrap:wrap; justify-content:center; column-gap:3cqw; font-weight:700; color:#5a1d10; }
.login-scroll-note .lsn-rates i { font-style:normal; white-space:nowrap; }
.login-scroll-note small { margin-top:2cqw; font-size:3.5cqw; color:#5b4630; }
/* 帳密框是圖案：蓋掉圖上的「遊戲帳號/遊戲密碼」，改寫提示字 */
.login-field-hint { position:absolute; left:27.5%; width:51%; height:4.1%; display:flex; align-items:center; padding-left:1.5%; background:#0c0c0c; color:#a89f8e; font-size:2.9cqw; letter-spacing:.08em; pointer-events:none; user-select:none; }
/* 帳密框改成真的輸入框（蓋在圖上的帳密框位置）；字要 ≥16px，否則 iPhone 一點輸入框整頁放大 */
input.login-field-hint { box-sizing:border-box; margin:0; border:0; border-radius:0; outline:none; padding:0 0 0 1.5%; color:#e8dcc0; font-family:inherit; font-size:16px; letter-spacing:.04em; pointer-events:auto; user-select:text; -webkit-user-select:text; }
input.login-field-hint::placeholder { color:#a89f8e; font-size:2.9cqw; letter-spacing:.08em; opacity:1; }
input.login-field-hint:focus { box-shadow:inset 0 0 0 1px #7d6c4c; }
.login-field-account { top:68.9%; }
.login-field-password { top:74.75%; }
/* 「記住帳號密碼」：密碼框正下方、跟帳密框左緣對齊，夾在密碼框與登錄鈕之間 */
.login-remember { position:absolute; left:28%; top:88.9%; white-space:nowrap; height:2.6%; display:flex; align-items:center; gap:1.6cqw; color:#a89f8e; font-size:2.9cqw; letter-spacing:.08em; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.login-remember input { appearance:none; -webkit-appearance:none; flex:none; width:3.2cqw; height:3.2cqw; margin:0; border:1px solid #7d6c4c; border-radius:2px; background:#0c0c0c; display:grid; place-items:center; cursor:pointer; }
.login-remember input::after { content:""; width:1.7cqw; height:.9cqw; border:solid #e2bd6b; border-width:0 0 .45cqw .45cqw; transform:translateY(-.2cqw) rotate(-45deg); opacity:0; }
.login-remember input:checked { border-color:#d9b25e; }
.login-remember input:checked::after { opacity:1; }
.login-remember input:focus-visible { outline:1px solid #e2bd6b; outline-offset:2px; }
/* 註冊帳號：與「記住帳號密碼」同一列、靠右對齊輸入框右緣（js/00z bindAccount）；.need＝還沒註冊，發光提示第一次玩的人點它 */
.login-register { position:absolute; right:21.5%; top:88.65%; height:3.1%; padding:0 2.4cqw; display:flex; align-items:center; background:#0c0c0c; border:1px solid #7d6c4c; border-radius:3px; color:#e2bd6b; font-family:inherit; font-size:2.9cqw; letter-spacing:.12em; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.login-register:active { background:#1a150c; border-color:#d9b25e; }
.login-register:focus-visible { outline:1px solid #e2bd6b; outline-offset:2px; }
.login-register.need { border-color:#e2bd6b; color:#ffe6a6; animation:loginRegPulse 1.6s ease-in-out infinite; }
/* 第 296 項：註冊視窗 */
#reg-ov { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); padding:16px; }
#reg-ov .reg-box { width:min(340px, 100%); display:flex; flex-direction:column; gap:10px; padding:18px; background:linear-gradient(#211a10, #120e08); border:1px solid #7d6c4c; border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.7); color:#e8dcc0; font-family:"Microsoft JhengHei","PingFang TC",sans-serif; }
#reg-ov b { text-align:center; font-size:18px; letter-spacing:.3em; color:#f2d77f; margin-bottom:4px; }
#reg-ov input { box-sizing:border-box; width:100%; height:42px; padding:0 10px; border:1px solid #5c4e35; border-radius:3px; background:#0c0c0c; color:#e8dcc0; font-size:16px; outline:none; }
#reg-ov input:focus { border-color:#d9b25e; }
#reg-ov input::placeholder { color:#7d7362; font-size:14px; }
#reg-ov .reg-msg { min-height:18px; font-size:14px; color:#ff9a7a; text-align:center; }
#reg-ov .reg-btns { display:flex; gap:10px; }
#reg-ov .reg-btns button { flex:1; height:42px; border:1px solid #7d6c4c; border-radius:3px; background:#0c0c0c; color:#e2bd6b; font-size:15px; letter-spacing:.1em; cursor:pointer; }
#reg-ov .reg-btns button[type=submit] { background:linear-gradient(180deg, #b8913f, #6e521f); color:#1c1306; font-weight:700; border-color:rgba(200,160,80,.8); }
@keyframes loginRegPulse { 0%,100% { box-shadow:0 0 0 0 rgba(226,189,107,0); } 50% { box-shadow:0 0 2.2cqw .4cqw rgba(226,189,107,.75); } }
.login-msg { position:absolute; left:50%; top:93.2%; transform:translateX(-50%); white-space:nowrap; color:#e2bd6b; font-size:2.9cqw; letter-spacing:.06em; pointer-events:none; opacity:0; transition:opacity .2s; }
.login-msg.show { opacity:1; }
/* 開始遊戲＝圖上的「登錄」鈕：透明熱區 */
#creation-screen #main-menu { position:absolute; z-index:4; left:26.5%; top:81.4%; width:47%; height:5.8%; margin:0 !important; display:block; }
#main-menu.hidden { display:none !important; }
#creation-screen #main-menu > :not(#btn-start-menu) { display:none !important; }
#btn-start-menu { display:block; width:100%; height:100%; padding:0; border:0; border-radius:4px; background:transparent; cursor:pointer; touch-action:manipulation; transition:background-color .15s, box-shadow .15s; }
#btn-start-menu:hover { background:rgba(255,222,150,.07); box-shadow:0 0 14px rgba(216,179,80,.35); }
#btn-start-menu:active { background:rgba(255,222,150,.14); }
#btn-start-menu:focus-visible { outline:2px solid #e3bd55; outline-offset:2px; }

/* ===== 建立角色：照範本(1018×1544)排版 =====
   #creation-stage 照範本比例縮放到「整張放得進畫面」，裡面全用百分比定位(座標＝範本 px ÷ 1018 或 1544)，
   字級用 cqw 跟著舞台寬度走。標題/圖示/按鈕是從範本裁下來的圖(public/assets/create/)。桌機/手機同一套。 */
#creation-panel:not(.hidden) {
    position:fixed;
    z-index:20;
    inset:0;
    top:var(--orig-bar-h, 0px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    /* 範本背景(頂端一束光、中間偏上微亮、底部石地)鋪滿整個畫面——畫在舞台上的話，舞台比例和螢幕不同時上下/左右會露出色帶 */
    background:
        radial-gradient(ellipse 30% 34% at 50% 4%, rgba(190,180,150,.16), transparent 70%),
        radial-gradient(ellipse 70% 30% at 50% 30%, rgba(90,84,72,.22), transparent 75%),
        radial-gradient(ellipse 80% 22% at 50% 94%, rgba(60,56,50,.35), transparent 80%),
        linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 55%, #0e0e0f 100%);
}
#creation-stage {
    position:relative;
    flex:0 0 auto;
    width:min(calc(var(--vw1, 1vw) * 100), calc((calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px)) * 1018 / 1544));
    aspect-ratio:1018 / 1544;
    container-type:inline-size;
    overflow:hidden;
    font-family:"Microsoft JhengHei", "PingFang TC", sans-serif;
}
/* 範本裁下來的圖帶著原本的深色底：lighten 讓底色透出畫面背景，只留比背景亮的橫幅本身 */
#creation-title { position:absolute; left:24.07%; top:2.33%; width:52.06%; height:auto; mix-blend-mode:lighten; pointer-events:none; user-select:none; }

/* 中間立繪：腳下一圈火光(範本的法陣)，立繪黑底用 lighten 融進背景 */
#creation-avatar-stage { position:absolute; left:29.5%; top:9.7%; width:41%; height:39.8%; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
#creation-avatar-stage::before {
    content:""; position:absolute; left:8%; right:8%; bottom:-3%; height:16%;
    background:radial-gradient(ellipse closest-side, rgba(255,170,60,.55), rgba(200,90,20,.28) 45%, rgba(120,40,0,0) 100%);
    filter:blur(2px);
}
#class-preview-img { position:relative; display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; mix-blend-mode:lighten; }

/* 左右兩欄：職業(左 3、右 2)＋最下一列男/女。每格＝圖示＋字；選中＝金色底光＋上下金線 */
#creation-class-list { position:absolute; inset:0; pointer-events:none; }
.creation-tile {
    position:absolute;
    top:calc(12.6% + var(--row) * 7.8%);
    width:17.7%;
    height:7.8%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.6cqw;
    padding:0;
    border:0;
    background:transparent;
    color:#e8dcc0;
    font-size:3.6cqw;
    letter-spacing:.12em;
    cursor:pointer;
    pointer-events:auto;
    touch-action:manipulation;
}
.creation-tile::after {   /* 格與格之間的細分隔線 */
    content:""; position:absolute; left:6%; right:6%; bottom:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(150,130,95,.35), transparent);
}
.creation-tile.tile-left { left:5.4%; }
.creation-tile.tile-right { right:5.4%; }
.creation-tile img { height:5.6cqw; width:auto; max-width:80%; object-fit:contain; mix-blend-mode:lighten; pointer-events:none; }
#btn-class-base-royal img { filter:contrast(1.7) brightness(.8); }   /* 範本的王族是選中狀態，裁下來的皇冠帶著選中的金色底光 → 壓掉淡光只留皇冠 */
.creation-tile img.ico-recolor { filter:invert(1) sepia(1) saturate(1.6) hue-rotate(-8deg) brightness(.92); }   /* 範本沒有黑暗妖精圖示：現有白底銀色圖示反相後調成金色 */
.creation-tile span { text-shadow:0 1px 2px #000; }
.creation-tile:hover { color:#fff1c8; }
.creation-tile.active {
    color:#f6e2a8;
    background:linear-gradient(90deg, rgba(214,170,80,.26), rgba(214,170,80,.06) 85%);
    box-shadow:inset 0 1px 0 rgba(232,196,110,.75), inset 0 -1px 0 rgba(232,196,110,.75), 0 0 14px rgba(214,170,80,.18);
}
.creation-tile.tile-right.active { background:linear-gradient(270deg, rgba(214,170,80,.26), rgba(214,170,80,.06) 85%); }
.creation-tile.active img { filter:drop-shadow(0 0 6px rgba(255,214,120,.55)); }
#btn-class-base-royal.active img { filter:contrast(1.7) brightness(.8) drop-shadow(0 0 6px rgba(255,214,120,.55)); }
.creation-tile.active img.ico-recolor { filter:invert(1) sepia(1) saturate(1.6) hue-rotate(-8deg) brightness(.92) drop-shadow(0 0 6px rgba(255,214,120,.55)); }

/* 名字 */
#creation-name-row { position:absolute; left:10.3%; right:19.2%; top:50%; height:4.1%; display:flex; align-items:center; gap:5.5cqw; }
#creation-name-row label { color:#e8dcc0; font-size:3.7cqw; letter-spacing:.12em; white-space:nowrap; }
#creation-name {
    flex:1 1 auto; min-width:0; height:100%; box-sizing:border-box;
    padding:0 2cqw; border:1px solid rgba(160,140,105,.55); border-radius:.6cqw;
    background:rgba(8,8,9,.85); box-shadow:inset 0 0 1.2cqw rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.6);
    color:#f2ead6; font:inherit; font-size:max(16px, 3.4cqw); text-align:center; outline:none;
}
/* 字至少 16px：手機上 3.4cqw 只有 13px 左右，iPhone 一點名字欄整頁放大、建完角色進遊戲還是放大的（站長 2026-10-19）；提示字照舊小字 */
#creation-name::placeholder { color:#7d7668; font-size:3.4cqw; }
#creation-name:focus { border-color:rgba(226,190,110,.85); }
#creation-name.invalid { border-color:rgba(214,92,80,.85); }
/* 「建立角色」按不下去的原因：名字欄正下方的空隙 */
#creation-hint { position:absolute; left:22.4%; right:19.2%; top:54.25%; height:1.95%; display:flex; align-items:center; justify-content:center; color:#c9b98f; font-size:2.9cqw; white-space:nowrap; pointer-events:none; }
#creation-hint.warn { color:#ef8f84; }
/* 數值旁的「+N」：這一項自己加了幾點 */
.creation-stat-plus { margin-left:.35em; color:#8fd18b; font-size:.68em; font-weight:700; vertical-align:.15em; }

/* 能力配點：6 列(範本 y 882 起、每列 68px) */
#stat-allocation { position:absolute; left:18.7%; right:18.5%; top:56.2%; height:27.6%; display:flex; flex-direction:column; border-top:1px solid rgba(150,130,95,.25); }
.creation-stat-row { position:relative; flex:1 1 0; display:grid; grid-template-columns:22% 10.6% 1fr 14.6%; align-items:center; border-bottom:1px solid rgba(150,130,95,.18); }
.creation-stat-label { padding-left:2.5%; color:#e8dcc0; font-size:3.8cqw; letter-spacing:.12em; }
.creation-stat-value { color:#f4efe3; font-size:4.3cqw; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }
.creation-stat-btn { height:78%; aspect-ratio:68 / 58; justify-self:start; padding:0; border:0; background:center / contain no-repeat; cursor:pointer; touch-action:manipulation; }
.creation-stat-btn.minus { background-image:url("/public-assets/create/btn-minus.png"); }
.creation-stat-btn.plus { aspect-ratio:92 / 60; justify-self:end; background-image:url("/public-assets/create/btn-plus.png"); }
.creation-stat-btn:hover { filter:brightness(1.2); }
.creation-stat-btn:active { filter:brightness(.9); }

/* 剩餘點數：兩側細線 */
#creation-pts-row {
    position:absolute; left:18%; right:18%; top:84.8%; height:2.4%;
    display:flex; align-items:center; justify-content:center; gap:1.2cqw;
    color:#e2c27a; font-size:3.6cqw; letter-spacing:.1em; white-space:nowrap;
}
#creation-pts-row::before, #creation-pts-row::after { content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, transparent, rgba(200,170,110,.55)); }
#creation-pts-row::after { background:linear-gradient(270deg, transparent, rgba(200,170,110,.55)); }
#creation-pts { color:#f2d27c; font-weight:700; }

/* 返回／建立角色：範本按鈕圖 */
#creation-back-button, #btn-start.creation-start-button {
    position:absolute; top:88.92%; height:6.35%; padding:0; border:0; background:transparent; cursor:pointer; touch-action:manipulation;
}
#creation-back-button { left:15.52%; width:30.84%; }
#btn-start.creation-start-button { left:52.85%; width:31.83%; }
#creation-back-button img, #btn-start.creation-start-button img { display:block; width:100%; height:100%; mix-blend-mode:lighten; pointer-events:none; }
#creation-back-button:hover, #btn-start.creation-start-button:hover:not(:disabled) { filter:brightness(1.12); }
#btn-start.creation-start-button:disabled { cursor:not-allowed; filter:grayscale(.75) brightness(.7); }

/* ===== 開始遊戲角色選擇畫面：標題「選擇角色」＋3 個拱門各放 1 張角色卡（一個帳號只能 3 隻角色）=====
   點有角色的卡＝直接進遊戲；點空卡＝直接進創角。沒有分頁、資訊欄與按鈕列。
   select.webp(572×1024)是直式全畫面圖，3 個拱門裡已畫好「New Character」；
   #load-select-frame 照圖片比例縮放到「整張放得進畫面」，標題與卡片用百分比疊在圖上。桌機/手機同一套。 */
#load-select-panel:not(.hidden) {
    position:fixed;
    z-index:24;
    inset:0;
    top:var(--orig-bar-h, 0px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#030303;
}
#load-art-stage {
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#030303;
}
#load-select-frame {
    position:relative;
    flex:0 0 auto;
    width:min(calc(var(--vw1, 1vw) * 100), calc((calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px)) * 572 / 1024));
    aspect-ratio:572 / 1024;
    container-type:inline-size;
}
#load-select-bg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:fill;
    pointer-events:none;
    user-select:none;
}
/* 左上角「返回」：回登入畫面（打帳密那頁）；圖沿用建立角色的返回鈕 */
#load-back-button { position:absolute; left:3%; top:2.6%; width:22%; aspect-ratio:314 / 98; z-index:3; padding:0; margin:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#load-back-button img { display:block; width:100%; height:100%; mix-blend-mode:lighten; pointer-events:none; }
#load-back-button:active { filter:brightness(1.3); }
#load-select-title {
    position:absolute;
    left:0;
    right:0;
    top:3.5%;
    margin:0;
    color:#f2d77f;
    font-family:Georgia, "Times New Roman", "Microsoft JhengHei", serif;
    font-size:7.5cqw;
    font-weight:700;
    letter-spacing:.18em;
    text-align:center;
    text-shadow:0 2px 4px #000, 0 0 10px #000, 0 0 18px rgba(0,0,0,.9), 0 0 12px rgba(231,194,91,.45);
    pointer-events:none;
}
/* 三個拱門開口(原圖 x)：24~180、212~368、400~556；y 370~770 */
#load-slot-grid {
    position:absolute;
    left:4.2%;
    width:93%;
    top:36.1%;
    bottom:24.8%;
    /* 不設 z-index：卡片立繪用 mix-blend-mode 把黑底融進拱門，這層一旦成為 stacking context 就混不到底圖 */
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:6%;
}
.load-slot-card {
    position:relative;
    min-width:0;
    min-height:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:50% 50% 0 0 / 20% 20% 0 0;   /* 頂端圓弧貼著拱門，hover 光暈才不會露出方角 */
    background:transparent;
    overflow:hidden;
    cursor:pointer;
    touch-action:manipulation;
    transition:box-shadow .15s, background-color .15s;
}
.load-slot-card:hover,
.load-slot-card:focus-visible {
    background:rgba(255,222,150,.06);
    box-shadow:inset 0 0 18px rgba(216,179,80,.35);
    outline:none;
}
.load-slot-card img {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    transform:scale(1.02);
    transform-origin:center bottom;
    filter:contrast(1.08) saturate(1.05);
    mix-blend-mode:lighten;   /* 立繪幀是黑底：只留比拱門亮的部分(角色本身)，黑底透出拱門 */
}
/* 已停用職業的舊角色：點了沒反應，不給 hover 光 */
/* 選取中的角色：拱門內一圈金光 */
.load-slot-card.filled.selected { box-shadow:inset 0 0 18px rgba(232,190,95,.38); background:rgba(255,222,150,.035); }
.load-slot-card.locked .load-slot-label { color:#9a9286; }
.load-slot-card.locked .load-slot-label strong { color:#b8ad98; }
/* 空卡提示字：在底圖「New Character」正下方 */
.load-slot-hint {
    position:absolute;
    left:0;
    right:0;
    top:44%;
    color:#d8c8a2;
    font-family:"Microsoft JhengHei", sans-serif;
    font-size:3cqw;
    text-align:center;
    text-shadow:0 1px 3px #000;
    pointer-events:none;
}
/* 有角色的卡：底部名字＋等級職業(資訊欄拿掉後，玩家靠這行分辨要進哪一隻) */
.load-slot-label {
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    top:32%;
    height:14%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    /* 名牌疊在底圖「New Character」那行字上(字在拱門內 x 20%~83%、y 37%~40.5%)，暗色橢圓底把字蓋掉；
       立繪頂端有留白，頭約在 49%，名牌不會擋到臉 */
    background:radial-gradient(ellipse closest-side, rgba(16,12,8,.96) 62%, rgba(16,12,8,0) 100%);
    color:#f4edda;
    font-family:"Microsoft JhengHei", sans-serif;
    font-size:3cqw;
    line-height:1.3;
    text-align:center;
    text-shadow:0 1px 2px #000, 0 0 6px #000, 0 0 10px #000;
    pointer-events:none;
}
.load-slot-label strong { display:block; color:#f2d77f; font-size:1.08em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 選取中角色的素質面板＋按鈕：放在拱門下方的地板區(底圖 y 776~1010) */
#load-info-panel {
    position:absolute; left:5%; right:5%; top:75.8%; bottom:1.4%;
    display:flex; flex-direction:column; justify-content:space-between; gap:1cqw;
    padding:2cqw 3cqw; box-sizing:border-box;
    border:1px solid rgba(190,150,80,.55); border-radius:1.2cqw;
    background:rgba(10,8,6,.82); box-shadow:0 0 18px rgba(0,0,0,.7);
    color:#e8dcc0; font-family:"Microsoft JhengHei", sans-serif; font-size:3.5cqw; line-height:1.25;
}
#load-info-panel.hidden { display:none; }
#load-info-head { display:flex; align-items:baseline; justify-content:center; gap:2.5cqw; }
#load-info-name { color:#f2d77f; font-size:1.25em; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#load-info-sub { color:#d8c8a2; }
#load-info-vitals { display:flex; justify-content:space-around; }
#load-info-stats { display:grid; grid-template-columns:repeat(3, 1fr); row-gap:.6cqw; text-align:center; }
#load-info-vitals.hidden, #load-info-stats.hidden { display:none; }
#load-info-panel b { color:#f4efe3; font-weight:600; font-variant-numeric:tabular-nums; }
#load-info-actions { display:flex; gap:3cqw; }
#load-info-actions button {
    flex:1 1 0; height:9cqw; padding:0; border-radius:.8cqw; cursor:pointer; touch-action:manipulation;
    font-family:inherit; font-size:1.1em; font-weight:700; letter-spacing:.15em;
    border:1px solid rgba(200,160,80,.75);
    background:linear-gradient(180deg, rgba(60,48,28,.95), rgba(22,17,10,.98)); color:#f3dfa2;
    text-shadow:0 1px 2px #000;
}
#load-info-actions button.hidden { display:none; }
#load-info-actions button:hover { filter:brightness(1.15); }
#load-btn-enter { background:linear-gradient(180deg, #b8913f, #6e521f) !important; color:#1c1306 !important; text-shadow:none !important; }

/* ===== 網頁版自己加的 ===== */
/* 伺服器每個帳號可建 6 隻以上：拱門一頁 3 隻，標題下方換頁 */
#load-pager { position:absolute; left:0; right:0; top:11.5%; display:flex; align-items:center; justify-content:center; gap:4cqw; color:#f2d77f;
  font-family:Georgia, "Microsoft JhengHei", serif; font-size:4.2cqw; text-shadow:0 1px 3px #000, 0 0 8px #000; }
#load-pager.hidden { display:none; }
#load-pager button { width:9cqw; height:9cqw; padding:0; border:1px solid rgba(200,160,80,.7); border-radius:50%; background:rgba(16,12,8,.8); color:#f2d77f;
  font-size:3.6cqw; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#load-pager button:disabled { opacity:.3; cursor:default; }
/* 30 級以上刪角＝7 天後才刪：名牌下多一行 */
.load-slot-label em { display:block; font-style:normal; color:#ef8f84; font-size:.9em; }
#load-info-land { display:none; }   /* 橫式才用（血盟、種族、相性、等級） */
/* 名字最多 10 個字（中英文都算一個；站長 2026-10-19）：名牌放不下一行就換行，不切掉 */
.load-slot-label { height:auto; min-height:14%; }
.load-slot-label strong { max-width:100%; white-space:normal; overflow-wrap:anywhere; word-break:break-all; }
.login-candle { display:none; }   /* 橫式登入的燭火 */

/* ===== 橫式（站長 2026-10-19「輸入帳密跟選人物也照原本風格改成橫式，直式自動調整兩個版本」）=====
   body.pcui＝pcui.js 畫面寬 ≥ 高時加的那個 class（跟遊戲內同一條判斷），轉向、拉視窗即時換；DOM 同一份，打到一半的帳密、名字不會掉。
   電腦（放得下 1 倍的）整頁鎖在 800×600 舞台裡等比例放大（js/stage.js），這三個畫面的舞台就是那 800×600；手機橫放沒鎖，照圖片比例「整張放得進畫面」四周補黑。
   底圖換成 3.5C 用戶端的 640×480 原圖（public/start-land/，tools/start-land.mjs 抽的）：登入 310（大廳＋書桌，左邊金框，燭火 273～300）、
   選角 105c（拱門改成 3 個＋中文素質欄）、建角 824（左邊金框放立繪；單機版那張右半邊沒有能力欄文字）。
   座標＝用戶端 px ÷ 640 或 480，字級用 cqw 跟著舞台走、手機橫放有下限；輸入框字 ≥16px（iPhone 一點就整頁放大）。 */
/* ── 登入：logo＋新玩家提示放左邊金框裡；帳密框是 59c 原圖（欄位 81×15，在框內 (80,16)、(80,39)）；「登錄」用金色文字鈕（原版 53c 只有 71×18，放大會糊） ── */
body.pcui #creation-screen #login-art-stage { width:min(calc(var(--vw1, 1vw) * 100), calc((calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px)) * 4 / 3)); aspect-ratio:4 / 3; background:#050505 url(/start-land/login.webp) 0 0 / 100% 100% no-repeat; }
body.pcui #creation-screen #login-bg-image, body.pcui .login-sword-fx, body.pcui .login-gem, body.pcui .login-glint, body.pcui .login-slash { display:none; }
body.pcui #login-art-stage::before { content:""; position:absolute; left:4.1%; top:9.8%; width:30%; height:51.2%; background:rgba(0,0,0,.42); pointer-events:none; }   /* 金框裡壓暗，字才看得清楚 */
body.pcui #login-art-stage::after { content:""; position:absolute; left:43.6%; top:47%; width:48%; height:25.75%; background:url(/start-land/login-box.png) 0 0 / 100% 100% no-repeat; pointer-events:none; }
body.pcui .login-logo { left:2.8%; right:auto; width:32.5%; top:12%; }
body.pcui .login-logo .ll-sub { font-size:2.3cqw; margin-bottom:.8cqw; text-shadow:0 0 .3cqw #000,0 .15cqw .5cqw #000,0 0 1cqw #000; }
body.pcui .login-logo .ll-main { font-size:9cqw; -webkit-text-stroke:.5cqw #24170a; text-shadow:0 0 1.2cqw rgba(0,0,0,.95),0 .3cqw .6cqw #000,0 0 2.6cqw rgba(255,190,80,.45); }
/* 燭火：書桌那塊（用戶端 138,306 起 124×120）14 張一條，0.18 秒換一張 */
body.pcui .login-candle { display:block; left:21.5625%; top:63.75%; width:19.375%; height:25%; overflow:hidden; }
body.pcui .login-candle::before { content:""; position:absolute; left:0; top:0; width:100%; height:1400%; background:url(/start-land/candle.webp) 0 0 / 100% 100% no-repeat; animation:loginCandle 2.52s steps(14) infinite; }
@keyframes loginCandle { to { transform:translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { body.pcui .login-candle::before { animation:none; } }
body.pcui .login-scroll-note { left:4.1%; width:30%; top:38%; height:20%; gap:.4cqw; color:#e8dcc0; font-family:"Microsoft JhengHei","PingFang TC",sans-serif; font-size:max(12px, 2.1cqw); line-height:1.5; text-shadow:0 1px 3px #000,0 0 6px #000; }
body.pcui .login-scroll-note b { font-size:max(15px, 2.7cqw); color:#f2d77f; margin-bottom:.6cqw; }
body.pcui input.login-field-hint { left:65.67%; width:22.34%; height:5.52%; z-index:1; padding:0 .8cqw; background:transparent; font-size:max(16px, 2.3cqw); line-height:1; }
body.pcui input.login-field-hint::placeholder { color:transparent; }   /* 框上已經寫了「遊戲帳號／遊戲密碼」 */
body.pcui .login-field-account { top:52.89%; }
body.pcui .login-field-password { top:61.35%; }
body.pcui .login-remember { left:44.5%; top:74%; height:5%; gap:.8cqw; color:#e8dcc0; font-size:max(13px, 2cqw); text-shadow:0 1px 2px #000,0 0 4px #000; }
body.pcui .login-remember input { width:max(15px, 2.2cqw); height:max(15px, 2.2cqw); }
body.pcui .login-remember input::after { width:max(7px, 1.1cqw); height:max(4px, .55cqw); border-width:0 0 max(2px, .3cqw) max(2px, .3cqw); transform:translateY(-15%) rotate(-45deg); }
body.pcui .login-register { right:8.4%; top:73.8%; height:5.4%; padding:0 1.4cqw; font-size:max(13px, 2cqw); }
body.pcui #creation-screen #main-menu { left:55.6%; top:81%; width:24%; height:8.11%; }
body.pcui #btn-start-menu, body.pcui #btn-start-menu:hover, body.pcui #btn-start-menu:active { display:flex; align-items:center; justify-content:center; border:1px solid rgba(200,160,80,.8); border-radius:.5cqw; background:linear-gradient(180deg, #b8913f, #6e521f); box-shadow:0 2px 8px rgba(0,0,0,.6); }
body.pcui #btn-start-menu::before { content:"登錄"; color:#1c1306; font-family:"Microsoft JhengHei","PingFang TC",sans-serif; font-size:max(15px, 2.6cqw); font-weight:700; letter-spacing:.6em; padding-left:.6em; }
body.pcui #btn-start-menu:hover { filter:brightness(1.12); }
body.pcui #btn-start-menu:active { filter:brightness(.92); }
body.pcui .login-msg { left:58%; top:90.5%; padding:.25em .8em; border-radius:3px; background:rgba(0,0,0,.65); font-size:max(13px, 2cqw); }

/* ── 選角：3 個拱門（一個帳號 3 隻）；選中角色的值填進 105c 下面畫好的暗框（裡面 81×14，連外框 81×16：位置照框裡、往上挪 1px），
      名字、血盟可能比框長：蓋一條一樣樣式、往右加長的框（右邊那段底圖是空的）；按鈕放素質欄右邊的空位 ── */
body.pcui #load-select-frame { width:min(calc(var(--vw1, 1vw) * 100), calc((calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px)) * 4 / 3)); aspect-ratio:4 / 3; background:url(/start-land/select.webp) 0 0 / 100% 100% no-repeat; }
body.pcui #load-select-bg, body.pcui #load-select-title { display:none; }
body.pcui #load-slot-grid { left:2.89%; width:93.6%; top:3.1%; bottom:45.4%; column-gap:5.1%; }   /* 拱門開口 x 18～618、y 15～262 */
body.pcui .load-slot-card { border-radius:50% 50% 0 0 / 12% 12% 0 0; }   /* 拱門頂端的圓弧：名牌在裡面，弧太深會切到長名字的兩端 */
body.pcui .load-slot-label { top:7%; min-height:0; padding:.5em 6px; font-size:max(12px, 1.9cqw); }
body.pcui .load-slot-label strong { flex:none; max-width:100%; }
body.pcui .load-slot-hint { font-size:max(12px, 1.9cqw); }
body.pcui #load-pager { top:50.3%; gap:2cqw; font-size:max(12px, 2.2cqw); }
body.pcui #load-pager button { width:max(26px, 4.4cqw); height:max(26px, 4.4cqw); font-size:max(11px, 1.8cqw); }
body.pcui #load-back-button { left:78.1%; top:85.5%; width:18.75%; }
body.pcui #load-info-panel { inset:0; display:block; padding:0; border:0; border-radius:0; background:none; box-shadow:none; pointer-events:none; font-size:max(12px, 1.9cqw); line-height:1; }
body.pcui #load-info-panel.hidden { display:none; }
body.pcui #load-info-head, body.pcui #load-info-vitals, body.pcui #load-info-stats, body.pcui #load-info-land { display:contents; }
body.pcui #load-info-sub { display:none; }
body.pcui #load-info-name, body.pcui #load-info-land > b, body.pcui #load-info-vitals > span, body.pcui #load-info-stats > span { position:absolute; width:12.66%; height:3.33%; translate:0 -6.25%; max-width:none; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
body.pcui #load-info-name, body.pcui #load-info-land > #load-info-clan { width:auto; min-width:12.66%; height:auto; min-height:3.33%; translate:0 -50%; padding:1px .5em; box-sizing:border-box; border:1px solid #4a3d29; background:#0a0908; }
body.pcui #load-info-name { max-width:36.5%; font-size:max(13px, 2cqw); }   /* 名字那列右邊整段是空的：10 個字放得下 */
body.pcui #load-info-land > #load-info-clan { max-width:20.9%; overflow:hidden; }   /* 右邊有「等級」 */
body.pcui #load-info-vitals > span, body.pcui #load-info-stats > span { font-size:0; }   /* 「HP」「力量」這些字底圖上有了，只留數值 */
body.pcui #load-info-vitals b, body.pcui #load-info-stats b { font-size:max(12px, 1.9cqw); }
body.pcui #load-info-name, body.pcui #load-info-clan, body.pcui #load-info-cls, body.pcui #load-info-law, body.pcui #load-info-vitals > span { left:25.94%; }
body.pcui #load-info-lv, body.pcui #load-info-stats > span { left:62.81%; }
body.pcui #load-info-name { top:63.02%; }   /* 加長的框：對齊底圖框的中線（字比框高時往上下長，不切字） */
body.pcui #load-info-clan { top:66.98%; }
body.pcui #load-info-cls { top:70.63%; }
body.pcui #load-info-law { top:74.79%; }
body.pcui #load-info-vitals > span:nth-child(1) { top:82.5%; }
body.pcui #load-info-vitals > span:nth-child(2) { top:87.08%; }
body.pcui #load-info-vitals > span:nth-child(3) { top:91.67%; }
body.pcui #load-info-lv { top:65.42%; }
body.pcui #load-info-stats > span:nth-child(1) { top:72.71%; }   /* 力量 */
body.pcui #load-info-stats > span:nth-child(2) { top:76.67%; }   /* 敏捷 */
body.pcui #load-info-stats > span:nth-child(3) { top:80.42%; }   /* 體質 */
body.pcui #load-info-stats > span:nth-child(4) { top:91.88%; }   /* 智力（底圖排在最後） */
body.pcui #load-info-stats > span:nth-child(5) { top:84.17%; }   /* 精神 */
body.pcui #load-info-stats > span:nth-child(6) { top:87.92%; }   /* 魅力 */
body.pcui #load-info-actions { position:absolute; left:78.1%; width:18.75%; top:61.7%; height:17%; flex-direction:column; gap:1.4cqw; pointer-events:auto; }
body.pcui #load-info-actions button { height:auto; border-radius:.5cqw; font-size:max(13px, 2.1cqw); letter-spacing:.12em; }

/* ── 建角：立繪放左邊金框裡，職業、名字、配點、按鈕排在右半邊的暗色面板上（能力兩欄各 3 項）；
      面板底色跟直式建角一樣（範本的暗色）：職業圖示是從範本裁的、帶著範本底色，疊在別的顏色上會看到一塊方底 ── */
body.pcui #creation-panel:not(.hidden) { background:#050505; }
body.pcui #creation-stage { width:min(calc(var(--vw1, 1vw) * 100), calc((calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px)) * 4 / 3)); aspect-ratio:4 / 3; background:url(/start-land/create.webp) 0 0 / 100% 100% no-repeat; }
body.pcui #creation-stage::before { content:""; position:absolute; left:51.5%; top:1.5%; right:1.5%; bottom:1.5%; border:1px solid rgba(190,150,80,.55); border-radius:.8cqw; box-shadow:0 0 18px rgba(0,0,0,.8);
  background:radial-gradient(ellipse 60% 22% at 50% 4%, rgba(190,180,150,.12), transparent 70%), linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 55%, #0e0e0f 100%); }
body.pcui #creation-title { left:56%; top:3%; width:36%; }
body.pcui #creation-avatar-stage { left:8%; top:14%; width:33.5%; height:52%; }
body.pcui .creation-tile { top:calc(15% + var(--row) * 9%); width:19%; height:9%; gap:.3cqw; font-size:max(13px, 2cqw); }
body.pcui .creation-tile.tile-left { left:54%; }
body.pcui .creation-tile.tile-right { left:auto; right:4%; }
body.pcui .creation-tile img { height:max(16px, 3.2cqw); }
body.pcui #creation-name-row { left:54%; right:4%; top:53%; height:6%; gap:1.6cqw; }
body.pcui #creation-name-row label { font-size:max(13px, 2.1cqw); }
body.pcui #creation-name { padding:0 1cqw; border-radius:.4cqw; font-size:max(16px, 2.2cqw); }
body.pcui #creation-name::placeholder { font-size:max(12px, 1.8cqw); }
body.pcui #creation-hint { left:54%; right:4%; top:59.5%; height:3.5%; font-size:max(12px, 1.8cqw); }
body.pcui #stat-allocation { left:53%; right:3%; top:64%; height:18%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, 1fr); grid-auto-flow:column; column-gap:3%; }
body.pcui .creation-stat-row { grid-template-columns:28% 19% minmax(0, 1fr) 24%; }
body.pcui .creation-stat-label { padding-left:0; font-size:max(13px, 2.1cqw); letter-spacing:.06em; }
body.pcui .creation-stat-value { font-size:max(14px, 2.4cqw); }
body.pcui #creation-pts-row { left:54%; right:4%; top:83%; height:3.5%; gap:.8cqw; font-size:max(13px, 2cqw); }
body.pcui #creation-back-button, body.pcui #btn-start.creation-start-button { top:89%; height:7.9%; }
body.pcui #creation-back-button { left:54.5%; width:19%; }
body.pcui #btn-start.creation-start-button { left:76%; width:19.6%; }


/* 選角卡片的光改成中間往外淡掉的橢圓：原本的長方形內光四個角會露出來、對不上拱門（站長 2026-10-24 截圖圈四個角） */
.load-slot-card:hover,
.load-slot-card:focus-visible,
.load-slot-card.filled.selected { box-shadow:none; }
.load-slot-card:hover,
.load-slot-card:focus-visible { background:radial-gradient(ellipse 48% 46% at 50% 56%, rgba(255,222,150,.10), rgba(255,222,150,0) 100%); }
.load-slot-card.filled.selected { background:radial-gradient(ellipse 48% 46% at 50% 56%, rgba(255,214,130,.16), rgba(255,214,130,0) 100%); }

/* ===== 登入首頁換新圖（站長 2026-10-25）=====
   直式 /start-land/login-p.webp（941×1672）、橫式 /start-land/login-l.webp（1448×1086）：站長給的底圖＋新 logo 先合成好（舊 logo 露出的尖角用旁邊天空蓋掉），
   帳密框、「登錄」鈕都畫在圖上：輸入框只蓋圖上框裡的提示字那段（左邊的人像／鎖頭圖示留著），空的時候透明、露出圖上的「遊戲帳號／遊戲密碼」，
   打了字才換成框裡的底色蓋掉提示字。下面的百分比都是對新圖量的（直式 ÷941／÷1672、橫式 ÷1448／÷1086）。 */
.login-logo { display:none; }   /* logo 已經畫在圖上 */
#creation-screen #login-art-stage { width:min(calc(var(--vw1, 1vw) * 100), calc((calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px)) * 941 / 1672)); aspect-ratio:941 / 1672; }
input.login-field-hint { left:29.33%; width:49.73%; height:4%; padding:0 0 0 1.3cqw; background:transparent; }
input.login-field-hint::placeholder { color:transparent; }
input.login-field-hint:not(:placeholder-shown) { background:#05090c; }
input.login-field-hint:-webkit-autofill { -webkit-box-shadow:0 0 0 100px #05090c inset; -webkit-text-fill-color:#e8dcc0; caret-color:#e8dcc0; }
input.login-field-hint:focus { box-shadow:none; }
.login-field-account { top:75.24%; }
.login-field-password { top:80.8%; }
#creation-screen #main-menu { left:26.99%; top:87.5%; width:45.8%; height:5.2%; }
/* 記住帳號密碼／註冊帳號：「登錄」下面一列，左右對齊帳密框外緣 */
.login-remember { left:20.62%; top:93.7%; height:2.7%; }
.login-register { right:20.51%; top:93.7%; height:2.7%; }
.login-msg { top:96.9%; }
.login-scroll-note { left:24%; width:52%; top:40.5%; height:29%; font-size:4.6cqw; }
.login-scroll-note b { font-size:5.8cqw; }
/* 劍光：遮罩＝圖上看得到的那段劍；紅寶石、護手兩端星芒 */
.login-sword-fx { left:46.44%; top:23.206%; width:34.325%; height:14.234%; -webkit-mask-image:url(/start-land/p-sword-mask.png); mask-image:url(/start-land/p-sword-mask.png); }
.login-gem { left:62.7%; top:31.76%; width:9cqw; height:6cqw; margin:-3cqw 0 0 -4.5cqw; }
.login-glint.lg1 { left:46.87%; top:28.35%; }
.login-glint.lg2 { left:80.45%; top:36.84%; }
/* 登錄動畫：劍圖 p-sword（看得到的劍＋補畫藏在信紙後面的劍身）、補丁 p-patch（沒劍的那張）；信紙 x 150～795、y 615～1225，
   裂痕從上緣 (705,615) 斜到下緣 (255,1225)。p-logo-cover＝logo 右下角蓋在柄頭上的那一塊，劍動起來柄頭才會留在 logo 後面 */
.ls-patch { left:44.315%; top:22.01%; width:38.47%; height:16.627%; }
.ls-sword { left:20.51%; top:23.206%; width:60.255%; height:36.722%; transform-origin:70.02% 23.45%; transform:none; }
.ls-cover { left:59.511%; top:21.531%; width:31.881%; height:8.971%; z-index:6; }
.ls-hole { left:15.94%; top:36.782%; width:68.545%; height:36.484%; }
.ls-a { clip-path:polygon(15.94% 36.782%, 46.759% 36.782%, 46.759% 37.679%, 61.211% 37.679%, 61.211% 36.782%, 74.92% 36.782%, 27.099% 73.266%, 15.94% 73.266%); }   /* 上緣挖掉劍身壓在卷軸上的那一小段（x 440～576、到 y 630）：那段留在原地、由劍圖／補丁接手 */
.ls-b { clip-path:polygon(74.92% 36.782%, 84.485% 36.782%, 84.485% 73.266%, 27.099% 73.266%); }
.ls-trail { display:none; }
.ls-cut { left:74.92cqw; top:65.356cqw; width:80.55cqw; transform:rotate(126.42deg) scaleX(0); }
.ls-flash { left:65.887cqw; top:77.577cqw; }

/* ── 橫式：底圖換 login-l（logo、信紙、帳密框、登錄鈕都在圖上）；舊的燭火、金框壓暗、帳密框疊圖拿掉，「登錄」改回透明熱區 ── */
body.pcui #creation-screen #login-art-stage { background-image:url(/start-land/login-l.webp); }
body.pcui #login-art-stage::before, body.pcui #login-art-stage::after, body.pcui .login-candle { display:none; }
body.pcui .login-scroll-note { left:31%; width:38%; top:47%; height:21%; gap:.3cqw; color:#3b2a17; font-family:"Noto Serif TC","PMingLiU",serif; font-size:max(13px, 2cqw); line-height:1.5; text-shadow:none; }
body.pcui .login-scroll-note b { font-size:max(15px, 2.5cqw); color:#5a1d10; margin-bottom:.6cqw; }
body.pcui .login-scroll-note b { margin-bottom:.2cqw; }
body.pcui .login-scroll-note .lsn-sell { margin-bottom:.4cqw; }
body.pcui .login-scroll-note .lsn-rates { margin-bottom:.2cqw; padding:.2cqw 1.5cqw; }
body.pcui .login-scroll-note small { margin-top:.2cqw; font-size:max(12px, 1.7cqw); }
body.pcui input.login-field-hint { left:38.19%; width:27.42%; height:4.79%; padding:0 0 0 .9cqw; background:transparent; font-size:max(16px, 1.7cqw); }
body.pcui input.login-field-hint:not(:placeholder-shown) { background:#05090c; }
body.pcui .login-field-account { top:72.84%; }
body.pcui .login-field-password { top:79.1%; }
body.pcui #creation-screen #main-menu { left:37.71%; top:85.91%; width:24.45%; height:7.18%; }
body.pcui #btn-start-menu, body.pcui #btn-start-menu:active { display:block; border:0; border-radius:4px; background:transparent; box-shadow:none; filter:none; }
body.pcui #btn-start-menu:hover { background:rgba(255,222,150,.07); box-shadow:0 0 14px rgba(216,179,80,.35); filter:none; }
body.pcui #btn-start-menu::before { content:none; }
body.pcui .login-remember { left:34.18%; top:93.6%; height:4.4%; }
body.pcui .login-register { right:34.12%; top:93.8%; height:4%; }
body.pcui .login-msg { left:50%; top:66.3%; }

/* ── 第 325 項（站長 2026-10-27「輸入帳密區信紙文字不好看」）：信紙字型本來寫 Noto Serif TC 但沒載入、退回細明體（細又散）→
   改用網站自帶的思源宋體子集（fonts/letter-700／900.woff2，只有信紙用得到的字＋數字，各約 11KB；要改信紙文字記得重產，缺字會退回細明體）；
   兩行賣點粗墨色、倍率改成三顆朱紅小印、分隔改成兩頭淡出的細線 ── */
@font-face { font-family:"LetterSerif"; src:url(/fonts/letter-700.woff2) format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"LetterSerif"; src:url(/fonts/letter-900.woff2) format("woff2"); font-weight:900; font-display:swap; }
.login-scroll-note, body.pcui .login-scroll-note { font-family:"LetterSerif","Noto Serif TC","PMingLiU",serif; color:#3a2412; text-shadow:0 0 1px rgba(58,36,18,.25); }
.login-scroll-note .lsn-sell { gap:.2em; }
.login-scroll-note .lsn-sell span { font-weight:900; letter-spacing:.14em; font-size:1.12em; color:#2e1a0b; }
.login-scroll-note .lsn-rates, body.pcui .login-scroll-note .lsn-rates { position:relative; border:0; padding:.55em .4em; }
.login-scroll-note .lsn-rates::before, .login-scroll-note .lsn-rates::after { content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(110,40,20,.55) 20%, rgba(110,40,20,.55) 80%, transparent); }
.login-scroll-note .lsn-rates::before { top:0; } .login-scroll-note .lsn-rates::after { bottom:0; }
.login-scroll-note .lsn-rates span { column-gap:.35em; row-gap:.35em; }
body.pcui .login-scroll-note .lsn-rates span { column-gap:.5em; }
.login-scroll-note .lsn-rates i { padding:.08em .45em .12em; border:1.5px solid rgba(150,36,20,.8); border-radius:.25em; background:rgba(160,40,20,.07);
  color:#8a2414; font-weight:900; font-size:.8em; letter-spacing:.04em; box-shadow:inset 0 0 0 1px rgba(150,36,20,.15); }
body.pcui .login-scroll-note .lsn-rates i { font-size:.92em; letter-spacing:.06em; }   /* 直式信紙窄：三顆印縮小排成一列 */
.login-scroll-note small, body.pcui .login-scroll-note small { font-weight:700; color:#6a4c2c; letter-spacing:.06em; }

/* 首頁 LINE 群組鈕（站長 2026-10-30）：右上角（下面那排左邊是「記住帳號密碼」，放不下）；樣式沿用 .login-register */
.login-line { right:3%; left:auto; top:1.6%; height:3.1%; text-decoration:none; color:#9fe08a; border-color:#4f7a44; background:rgba(12,12,12,.8); }
body.pcui .login-line { right:2%; left:auto; top:2.5%; height:4.5%; }
/* LINE 群組鈕改成 LINE 風格（站長 2026-10-30「按鈕請用 line 風格圖片按鈕」）：LINE 綠底、白色對話框圖示 */
/* 站長 2026-11-01「加入群組風格改跟左上角遊戲指南一樣」：黑底金字金框（同 .login-guide），只留 LINE 綠色小圖示 */
.login-line { background:rgba(12,10,8,.85); border:1px solid #9a7b45; border-radius:8px; color:#f2d77f; gap:.5em; letter-spacing:.06em; font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.login-line:active { background:#2a2016; }
.login-line .ll-ico { height:78%; width:auto; flex:none; }
.login-line { height:4.4%; font-size:3.6cqw; padding:0 3cqw; }
body.pcui .login-line { height:4.5%; font-size:max(13px, 2cqw); padding:0 1.4cqw; }
/* 服務條款、隱私權政策連結（站長 2026-11-01）：卷軸本身不吃點擊，只有連結可以點 */
.login-scroll-note small.lsn-legal { margin-top:1cqw; font-size:2.6cqw; white-space:nowrap; color:#6b5638; }
.login-scroll-note .lsn-legal a { pointer-events:auto; color:#7a2414; text-decoration:underline; text-underline-offset:2px; }
body.pcui .login-scroll-note small.lsn-legal { font-size:max(11px, 1.3cqw); margin-top:0; }
#reg-ov .reg-legal { font-size:13px; color:#b8a882; text-align:center; }
#reg-ov .reg-legal a { color:#f2d77f; }
/* 遊戲指南按鈕（站長 2026-11-01）：左上角，跟右上角 LINE 一樣大小，黑底金框 */
.login-guide { left:3%; right:auto; top:1.6%; height:4.4%; font-size:3.6cqw; padding:0 3cqw; text-decoration:none; color:#f2d77f; background:rgba(12,10,8,.85); border:1px solid #9a7b45; border-radius:8px; font-weight:700; letter-spacing:.06em; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.login-guide:active { background:#2a2016; }
body.pcui .login-guide { left:2%; right:auto; top:2.5%; height:4.5%; font-size:max(13px, 2cqw); padding:0 1.4cqw; }