/* ============ 登入畫面（2026-11-13 改版：拾星冒險團） ============
   背景主視覺：#kv 用 object-fit:cover，焦點在 index.html 的 style="--kvp:直式焦點;--kvl:橫式焦點" 調整。
   直式用 art/kv_p.webp（8K 正方形的中間 46% 寬），橫式用 art/kv_l.webp（全寬、上下裁掉一些），<picture> 依方向只下載一張。
   標題：目前用 CSS 文字標誌「拾星冒險團」（象牙／香檳色字、深藍紫描邊、淡紫光暈、小星星）。
   業主交新的 art/ui/logo.webp 後，把 index.html 的 LOGO_IMG 改成 true 就換回圖片（#logo.img；圖載入失敗自動退回文字）。 */
#start{background:#2a2160;justify-content:flex-start;padding:0 16px calc(var(--sab) + 12px);gap:0}
#kvb{display:contents}
#kv{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--kvp,50% 50%);z-index:-2;pointer-events:none;user-select:none;-webkit-user-select:none}
@media (orientation:landscape){#kv{object-position:var(--kvl,50% 42%)}}
#start::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(30,18,70,.18),rgba(30,18,70,0) 30%,rgba(30,18,70,0) 52%,rgba(24,16,52,.55) 82%,rgba(20,14,44,.78))}

/* ---- 文字標誌 ---- */
#start h1#logo{position:relative;margin:max(calc(var(--sat) + 22px),7vh) 0 0;padding:0;background:none;filter:none;color:inherit;letter-spacing:0;line-height:1;display:flex;align-items:center;justify-content:center;font-size:clamp(44px,13vw,64px)}
#logo .lg-star{position:absolute;z-index:1;width:.92em;height:.92em;left:-.36em;top:-.5em;transform:rotate(-12deg);filter:drop-shadow(0 0 8px rgba(255,236,180,.9)) drop-shadow(0 0 16px rgba(170,120,255,.6))}
#logo .lg-t{position:relative;z-index:0;display:inline-block;font-weight:900;letter-spacing:.04em;white-space:nowrap;
  font-family:"Arial Rounded MT Bold",ui-rounded,"SF Pro Rounded","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:#fff8ea;-webkit-text-stroke:.16em #fff8ea;paint-order:stroke fill}
#logo .lg-t::before,#logo .lg-t::after{content:attr(data-t);position:absolute;left:0;top:0;white-space:nowrap}
#logo .lg-t::before{z-index:-1;color:#2a1c5c;-webkit-text-stroke:.3em #2a1c5c;filter:drop-shadow(0 .06em 0 #170d3a) drop-shadow(0 0 .3em rgba(165,115,255,.8))}
#logo .lg-t::after{-webkit-text-stroke:0;background:linear-gradient(#fffdf4 10%,#fbefd0 46%,#efd5a0 74%,#ddb779);-webkit-background-clip:text;background-clip:text;color:transparent}
#logo.img .lg-t,#logo.img .lg-star{display:none}
#logo img{display:block;width:min(82vw,460px);height:auto;filter:drop-shadow(0 6px 14px rgba(20,10,50,.45))}
#logo.img{margin-top:max(calc(var(--sat) + 14px),5vh)!important}
@media (min-width:900px) and (min-height:640px){#logo img{width:min(46vw,640px)}}
@media (orientation:landscape) and (max-height:520px){#logo img{width:auto;height:84px}#logo.img{margin-top:max(calc(var(--sat) + 6px),8px)!important}}
#start.creating #logo img{width:auto;height:64px}
#start>p.tagl{margin:12px 0 0;font-size:13px;font-weight:800;letter-spacing:.06em;opacity:1;color:#fff;text-shadow:0 1px 0 #3b1660,0 0 8px rgba(40,20,90,.8)}

/* ---- 版面：標誌在上（天空），登入框在下（草地） ---- */
#acct{width:min(400px,100%);margin:auto 0 0;padding-top:18px;gap:10px}
#start.creating #acct{margin-top:0;padding-top:0}
#start #go{margin-top:12px;height:58px;line-height:55px;font-size:21px;min-width:220px}
#start small{position:static;max-width:min(400px,100%);margin:12px 0 0;padding:5px 12px;border-radius:10px;background:rgba(18,12,42,.55);font-size:11px;line-height:1.5;font-weight:600;opacity:.85}
#start small a{color:#ffe38a;text-decoration:underline;cursor:pointer}

/* ---- 伺服器狀態：只有名字＋狀態字 ---- */
.srv{align-self:center;gap:8px;font-size:13px;padding:5px 14px;border-radius:999px;background:rgba(18,12,42,.62);border:1.5px solid rgba(255,227,138,.45)}
.srv i{font-style:normal;font-weight:900}

/* ---- 登入框：跟遊戲面板同一套框 ---- */
.abox{background:none;border:solid transparent;border-width:18px 16px;border-image:url(../art/ui/panel.webp) 67 fill/30px stretch;border-radius:0;box-shadow:none;padding:4px 4px 2px;gap:10px;filter:drop-shadow(0 6px 10px rgba(10,5,30,.45))}
.abox>b{font-size:18px;color:#5a3418}
.abox p{font-size:13.5px}
.abox .hint{font-size:12px;line-height:1.55}
.abox a{font-size:13px;padding:6px 0;display:inline-block}
.abox .wn{font-size:24px}
.abox>div{gap:10px;flex-wrap:nowrap}
#acct .gb{height:50px;line-height:47px;font-size:18px;border-width:0 26px;border-image-width:0 26px}
#acct .gb.s{flex:1 1 0;min-width:0;height:46px;line-height:43px;font-size:15.5px;border-width:0 20px;border-image-width:0 20px}
#acct .gb.blue{border-width:0 20px;border-image-width:0 20px}
#acct .iab div{gap:10px}
.abox form{display:flex;flex-direction:column;gap:10px;margin:0}

/* ---- 輸入框（登入、引繼碼、綁定、建立角色共用） ---- */
.fl{display:flex;flex-direction:column;gap:5px;text-align:left;font-size:13px;font-weight:900;color:#6a4420}
.tx.big,.abox .tx{height:50px;border-radius:14px;border:2px solid #c99a4a;background:linear-gradient(#fffdf6,#fff6e0);box-shadow:inset 0 2px 3px rgba(120,80,20,.18),0 1px 0 #fff;padding:0 14px;font-size:17px;font-weight:800;color:#3f2a18;outline:none;transition:border-color .15s,box-shadow .15s}
.tx.big:focus,.abox .tx:focus{border-color:#ff9a2e;box-shadow:inset 0 2px 3px rgba(120,80,20,.12),0 0 0 3px rgba(255,190,80,.45)}
.tx.big::placeholder,.abox .tx::placeholder{color:#b49a78;font-weight:700}
.tx.code{text-align:center;letter-spacing:.18em;text-transform:uppercase;font-size:20px}
#dlg .fl{margin-bottom:10px}
#dlg .fl .tx{width:100%}

/* ---- 建立角色 ---- */
.cre label{font-size:13px}
.abox .nrow .mini{height:50px;padding:0 14px;font-size:14px}

/* ---- 桌機／大螢幕：放大、置中 ---- */
@media (min-width:900px) and (min-height:640px){
  #start h1#logo{font-size:clamp(64px,7.4vw,112px);margin-top:max(5vh,32px)}
  #start>p.tagl{font-size:16px;margin-top:16px}
  #acct{width:460px;gap:12px}
  .abox{border-width:22px 20px;border-image-width:34px;padding:6px 8px 4px}
  .abox>b{font-size:20px}
  .abox p{font-size:14.5px}
  .abox .hint{font-size:13px}
  #acct .gb{height:56px;line-height:53px;font-size:20px}
  #acct .gb.s{height:50px;line-height:47px;font-size:17px}
  .abox .tx{height:54px;font-size:18px}
  #start #go{height:64px;line-height:61px;font-size:23px;min-width:260px}
  #start small{max-width:560px;font-size:12px}
  .srv{font-size:14px}
}
/* ---- 橫式手機（矮）：標誌縮小 ---- */
@media (orientation:landscape) and (max-height:520px){
  #start h1#logo{font-size:38px;margin-top:max(calc(var(--sat) + 10px),14px)}
  #start>p.tagl{display:none}
  #acct{width:min(520px,100%);padding-top:8px;gap:8px}
  .abox{gap:8px}
  #acct .gb{height:46px;line-height:43px;font-size:17px}
  #acct .gb.s{height:44px;line-height:41px;font-size:15px}
  .abox .tx{height:46px}
  #start #go{height:52px;line-height:49px;font-size:19px;margin-top:8px}
  #start small{margin-top:8px}
}
#start.creating h1#logo{font-size:34px;margin-top:max(calc(var(--sat) + 14px),18px)}
#start.creating h1#logo .lg-star{display:none}
.fl .tx,.abox .tx,.tx.big{flex:none;width:100%;box-sizing:border-box}
.abox form>div{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap}
/* 橫式手機：登入框改成扁的，不要蓋住主角 */
@media (orientation:landscape) and (max-height:520px){
  .abox.home{flex-direction:row;flex-wrap:wrap;align-items:center}
  .abox.home>.gb{flex:1.2 1 0;min-width:0}
  .abox.home>div{flex:2 1 0}
  .abox.home>p,.abox.home>#gbtn{flex:1 1 100%}
  .abox.home .hint{font-size:11px;line-height:1.4}
  .abox form{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
  .abox form>*{grid-column:1/-1}
  .abox form>.fl:nth-of-type(1):not(:last-of-type),.abox form>.fl:nth-of-type(2){grid-column:auto}
  #start small{padding:3px 10px;font-size:10.5px}
}
#start .abox p,#start .iab p{margin:0}
#start .iab p{margin:4px 0 8px}
.abox .nrow .tx{flex:1 1 auto;width:auto;min-width:0}
.abox .nrow .mini{flex:none}