/* ═══ 經典登入畫面 → 捲軸展開 → 伺服器木牌 ═══════════════════════════════
   素材是官方的（UI.wz Login.img / Map.wz Back/login.img），所以一律
   image-rendering: pixelated，放大才不會糊成一團。 */
.lg-lock { overflow: hidden; }
.lg {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: #0b1016;
  animation: lg-in .35s ease both;
}
.lg.lg-out { animation: lg-fade .4s ease both; }
@keyframes lg-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes lg-fade { to { opacity: 0; visibility: hidden } }

/* 背景：官方登入圖。cover 會裁掉兩側的蘑菇屋，所以用 contain 再補色 */
.lg-bg {
  position: absolute; inset: 0;
  background: #58b8e8 url('/login/bg.jpg') center / cover no-repeat;
  image-rendering: pixelated;
}
.lg::after {            /* 壓一層暗角，木牌才浮得起來 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 85% at 50% 42%, rgba(6, 12, 20, .12) 0%, rgba(6, 12, 20, .42) 55%, rgba(6, 12, 20, .78) 100%);
}

.lg-stage { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; }
/* ⚠️ 絕對定位的小孩不吃父層的 place-items，要自己 inset:0 + place-content 才會置中 */
.lg-world { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px; }
/* ⚠️ `[hidden]` 在 UA 樣式表裡只是 `display:none`，被上面那行的 `display:grid` 蓋過去。
   結果木牌一直鋪滿整個畫面（inset:0 + z-index:3），把登入鈕的點擊全吃掉 ——
   畫面看起來正常，但按不動。這一行是必要的，不是多餘。 */
.lg-world[hidden] { display: none; }
.lg-stage { transition: opacity .25s ease, transform .25s ease; }
.lg-stage.gone { opacity: 0; transform: translateY(-10px); pointer-events: none; }

.lg-title { text-align: center; line-height: 1.1; }
.lg-title b {
  display: block; font-size: 46px; letter-spacing: 2px; color: #fff;
  text-shadow: 0 3px 0 #a0410f, 0 5px 14px rgba(0, 0, 0, .5);
}
.lg-title span { font-size: 14px; color: #fff; letter-spacing: 3px; text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .6); }

/* 木牌：官方圖 243×132。
   ⚠️ 裡面兩條凹槽的位置是**量出來的**不是目測：用 node-canvas 掃暗像素，
   得到 top 11.4% / left 6.2% / width 76.1% / height 17.4%。
   全部用百分比定位，木牌在手機縮小時裡面的字才會跟著縮。 */
.lg-sign {
  position: relative; width: min(486px, 86vw); aspect-ratio: 243 / 132;
  background: url('/login/sign.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
}
/* 兩條凹槽各自定位（量出來的：第一條 10~28%、第二條 31~49%，左 8% 寬 72%）。
   不要用 grid 把兩列塞進一個容器 —— 兩條凹槽中間有間隔，均分會讓第二列壓在木板上。 */
.lg-row {
  position: absolute; left: 8%; width: 72%; height: 18%;
  display: flex; align-items: center; gap: 4%;
  padding-left: 2%;
  font-size: clamp(10px, 2.2vw, 14px); line-height: 1;
}
.lg-row:nth-of-type(1) { top: 10%; }
.lg-row:nth-of-type(2) { top: 31%; }
.lg-row i { font-style: normal; width: 24%; color: #8a6a44; }
.lg-row span { color: #5b4228; font-weight: 600; letter-spacing: 1px; }

/* 登入鈕：官方是擺在木牌**右邊**，不是壓在木牌上 */
.lg-go {
  position: absolute; left: 100%; top: 11.4%; margin-left: 2%;
  width: 17%; aspect-ratio: 1; border: 0; padding: 0; cursor: pointer;
  background: url('/login/btlogin.png') center / 100% 100% no-repeat;
  image-rendering: pixelated; transition: transform .12s ease;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6));
}
.lg-go:hover { background-image: url('/login/btlogin-over.png'); transform: translateY(-1px); }
.lg-go:active { transform: translateY(1px) scale(.97); }

/* ⚠️ 背景是高彩度的草地與沙路，純白字加陰影還是會糊掉（實機截圖看才發現）。
   給一顆半透明深色膠囊，文字才讀得到。 */
.lg-note {
  margin: 0; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; color: #fff;
  background: rgba(8, 14, 22, .55);
  backdrop-filter: blur(2px);
}

/* ── 伺服器木牌：捲軸從上往下展開 ── */
.lg-board {
  position: relative; width: min(742px, 94vw); aspect-ratio: 371 / 222;
  background: url('/login/board.png') center top / 100% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5));
  /* 展開動畫：先壓成一條線（像捲起來的捲軸），再往下放開 */
  transform-origin: top center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .85s cubic-bezier(.22, .9, .25, 1);
}
.lg-world.roll .lg-board { clip-path: inset(0 0 0 0); }
.lg-world .lg-note2 { opacity: 0; transition: opacity .3s ease .7s; }
.lg-world.roll .lg-note2 { opacity: 1; }

/* 木牌 371×222：上面那條咖啡色是裝飾、中間米色帶放世界名、下面才是頻道格。
   ⚠️ y=40 / y=84 兩條界線在五個取樣行上都量得到（紙紋太雜，格線本身測不準），
   所以用這兩條定位：米色帶 18~38%、格子區 40% 起。 */
/* 米色帶放世界名。
   ⚠️ 不要用 Common/selectWorld.png 當底 —— 那張圖上烤死了「CH.」字樣，
      疊自己的字會互相打架。官方那格本來放的是世界名牌（world/N.png），
      我們的世界不在官方名單裡，所以直接排字。 */
.lg-bar {
  position: absolute; left: 0; right: 0; top: 18%; height: 20%;
  display: grid; place-items: center;
  color: #6b4a22; font-size: clamp(15px, 3vw, 26px); font-weight: 800; letter-spacing: 4px;
  text-shadow: 0 1px 0 rgba(255, 252, 240, .9);
  white-space: nowrap;
}
.lg-chs {
  position: absolute; left: 4.3%; right: 4.3%; top: 40%; height: 52%;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 1.6% 1.3%;
}
.lg-ch {
  display: grid; align-content: center; justify-items: center; gap: 8%;
  cursor: pointer; padding: 0;
  border: 1px solid rgba(120, 84, 44, .38); border-radius: 5px;
  background: rgba(255, 246, 219, .42);
  color: #5b4228; font: inherit;
  transition: background .14s ease, transform .14s ease, border-color .14s ease;
}
.lg-ch:hover { background: rgba(255, 229, 164, .95); border-color: #9a6a30; transform: translateY(-2px); }
.lg-ch:active { transform: translateY(0) scale(.97); }
.lg-ch b { font-size: clamp(10px, 1.7vw, 14px); font-weight: 700; line-height: 1; }
.lg-gauge { display: block; width: 62%; height: 4px; border-radius: 2px; background: rgba(120, 84, 44, .25); overflow: hidden; }
.lg-gauge u { display: block; height: 100%; background: linear-gradient(90deg, #6fbf4a, #d8c24a); }

@media (max-width: 820px) {
  .lg-title b { font-size: 34px; }
}
/* 木牌右邊的登入鈕在窄螢幕會被切掉 → 改擺木牌下面 */
@media (max-width: 560px) {
  .lg-sign { margin-bottom: 58px; }
  .lg-go { left: 50%; top: 100%; margin: 8px 0 0 0; transform: translateX(-50%); width: 56px; }
  .lg-go:hover, .lg-go:active { transform: translateX(-50%); }
}

/* 頁尾的「回登入畫面」：低調，不要跟主要操作搶 */
.foot-login {
  margin-left: auto; padding: 4px 11px; font: inherit; font-size: 12.5px;
  color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  transition: color .15s ease, border-color .15s ease;
}
.foot-login:hover { color: var(--accent); border-color: var(--accent); }