/* 全站基本設定。登入／選角／建角在 start.css（照搬單機版），遊戲中介面在 lmui.css */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050505; color: #e8e2d4; overflow: hidden;
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; }
.hidden { display: none !important; }
/* 4:3 舞台（js/stage.js，站長 2026-10-19「橫式鎖定 800X600 1200X900 依照比例縮放」）：電腦版面整頁 body 排成 800×600，等比例放大 --sts 倍、置中，外面黑邊。
   body 有 transform → 裡面 position:fixed 的都以 body 為準。vw／vh 在舞台裡沒意義：各檔寫成 calc(var(--vw1, 1vw) * N) 這種，鎖的時候換成舞台的 1%（8px／6px） */
html.stage43 { --vw1: 8px; --vh1: 6px; --dvh1: 6px; background: #000; }
html.stage43 body { position: fixed; left: var(--stx, 0px); top: var(--sty, 0px); width: 800px; height: 600px; transform: scale(var(--sts, 1)); transform-origin: 0 0; }
img { -webkit-user-drag: none; }

/* 地圖還沒產資料的提示 */
#maptip { position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 70; max-width: calc(var(--vw1, 1vw) * 86); padding: 14px 18px; background: rgba(0,0,0,.8); border-radius: 8px; }
/* 3.5C 用戶端的道具圖示（約 30 像素）：放大到格子大小時像素不糊 */
img.ic35, img[src^="/icon/"] { image-rendering: pixelated; object-fit: contain; }
/* 自己死了：畫面中間偏下一顆「重新開始」 */
#deadbox { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 120; }
#btn-restart { padding: 10px 28px; font-size: 17px; font-family: inherit; color: #fff6dc; background: linear-gradient(#7a5f35, #3f2f18); border: 1px solid #d8b062; border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.8); text-shadow: 0 1px 2px #000; cursor: pointer; }
/* 斷線接回中：蓋住整個遊戲畫面（介面、視窗都按不到） */
#relink { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); touch-action: none; }
/* 重新連線中：進度條（js/relink-ui.js；站長 2026-11-01） */
#relink .rl-box { width: min(340px, calc(100vw - 40px)); padding: 16px 20px 14px; text-align: center; background: rgba(12,9,6,.94); border: 1px solid #9c7535; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.6); }
#relink b { display: block; font-size: 17px; color: #f0e2bf; text-shadow: 0 1px 2px #000; }
#relink .rl-bar { height: 8px; margin: 12px 0 2px; border-radius: 4px; background: #2a2016; box-shadow: inset 0 1px 2px #000; overflow: hidden; }
#relink .rl-bar i { display: block; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8a6a35, #f6dc9c); box-shadow: 0 0 8px rgba(246,220,156,.5); transition: width .3s linear; }
#relink.done .rl-bar i { transition-duration: .2s; }
/* 換地圖進度條（js/maploading.js）：蓋住地圖那塊（跟 #cv 同位置），介面照常在上面 */
#mapload { position: absolute; left: 0; right: 0; top: var(--orig-bar-h, 0px); bottom: var(--m-nav-h, 0px); z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding-bottom: calc(var(--vh1, 1vh) * 12); background: #05080c; }
#mapload b { min-height: 1.2em; font-size: 18px; letter-spacing: 2px; color: #f0e2bf; text-shadow: 0 1px 3px #000; }
#mapload .ml-bar { position: relative; width: min(320px, calc(var(--vw1, 1vw) * 64)); height: 10px; overflow: hidden; background: rgba(0,0,0,.7); border: 1px solid #9c7535; border-radius: 6px; box-shadow: 0 0 6px rgba(0,0,0,.8); }
#mapload .ml-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#d9b45a, #a37624 50%, #6e4a12); transition: width .2s; }
/* 虛擬方向鍵（手機按住遊戲畫面才出現，js/main.js stickOn）：中心＝手指按下去那一點，圓鈕跟著手指、最遠到外圈；只是圖，不擋手指（事件在畫布上） */
#vstick { position: fixed; z-index: 56; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,.18) 0%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.5) 100%); border: 2px solid rgba(240,205,122,.75);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 14px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.55); }
#vstick[hidden] { display: none; }
#vstick i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, #fff3c4, #e2b65a 45%, #8a6220 100%); border: 1px solid #f0cd7a; box-shadow: 0 2px 6px rgba(0,0,0,.7); opacity: .9; }
