/* 手機優先:預設為直式手機,寬螢幕再放大 */ :root { --bg: #0b0a08; --panel: rgba(20, 17, 12, 0.92); --line: #5a4626; --gold: #d8b46a; --text: #e9e1cf; --muted: #9b8f78; --hp: #c23b2f; --mp: #2f63c2; --danger: #e25b4b; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 15px/1.5 "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; } canvas#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } .hidden { display: none !important; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(216,180,106,.08); } h1, h2, h3 { color: var(--gold); margin: 0 0 8px; font-weight: 600; letter-spacing: .05em; } h1 { font-size: 22px; } h2 { font-size: 19px; } h3 { font-size: 16px; } .sub, .hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; } form .hint { margin-top: 10px; } label { display: block; margin: 0 0 12px; color: var(--muted); font-size: 13px; } /* 16px 以上避免 iOS 聚焦時自動放大 */ input, select { display: block; width: 100%; margin-top: 4px; padding: 12px; background: #15120d; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; } input:focus, select:focus { outline: 1px solid var(--gold); } button { min-height: 44px; padding: 10px 18px; background: linear-gradient(#7a5a28, #57401c); color: #fff3d6; border: 1px solid #a07c3e; border-radius: 8px; font: inherit; font-size: 16px; cursor: pointer; touch-action: manipulation; } button:active { filter: brightness(1.3); } button.secondary { background: #221d15; border-color: var(--line); color: var(--text); } .row { display: flex; gap: 8px; margin-bottom: 12px; } .row > * { flex: 1; margin-top: 0; } .credits { margin: 14px 0 0; font-size: 11px; color: var(--muted); text-align: center; } .credits a { color: var(--gold); } .msg { color: var(--danger); min-height: 1.5em; margin: 8px 0 0; font-size: 14px; } /* ---- 登入 / 選角:手機上幾乎全寬 ---- */ .screen { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100vw - 32px); max-width: 420px; padding: 22px 20px; max-height: calc(100dvh - 32px - var(--sat) - var(--sab)); overflow: auto; } .screen form button[type=submit] { width: 100%; } #char-list { list-style: none; padding: 0; margin: 0 0 12px; } #char-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 56px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #17130d; } #char-list li:active { border-color: var(--gold); } #char-list li small { color: var(--muted); } #btn-new-char { width: 100%; } #newchar-form { margin-top: 12px; } .stat { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .stat span { flex: 1; color: var(--muted); } .stat b { width: 32px; text-align: center; font-size: 17px; } .stat button { min-height: 40px; width: 48px; padding: 0; font-size: 20px; } /* ---- 遊戲 HUD ---- */ /* 底部由下往上:經驗條 → 導覽列 → 聊天輸入 → 快捷欄 → 聊天紀錄 */ :root { --exp-h: 14px; --nav-h: 58px; --form-h: 42px; --hot-h: 50px; --tabs-w: 40px; --wood: linear-gradient(#5b4127, #3c2a18); --parch: #e9dcc0; } #hud { position: fixed; inset: 0; pointer-events: none; } #hud > * { pointer-events: auto; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* 左上狀態 */ #status { position: absolute; top: calc(6px + var(--sat)); left: calc(6px + var(--sal)); right: calc(134px + var(--sar)); display: flex; gap: 6px; pointer-events: none; } #portrait { position: relative; flex: none; width: 56px; height: 64px; border: 1px solid #6a5232; border-radius: 6px; background: radial-gradient(circle at 50% 35%, #3a3550, #15121c); overflow: hidden; } #portrait canvas { position: absolute; left: 4px; top: 4px; width: 48px; height: 48px; } #hud-lv { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 600; text-align: center; background: rgba(0,0,0,.6); color: #ffe7a6; line-height: 15px; } #status-main { flex: 1; min-width: 0; } .bar { position: relative; height: 15px; margin-bottom: 3px; background: #1a1611; border: 1px solid #000; border-radius: 3px; overflow: hidden; } .bar i { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width .2s; } .bar.hp i { background: linear-gradient(#ef6a5c, #b22d22); } .bar.mp i { background: linear-gradient(#6c9cf0, #2a55b4); } .bar b { position: relative; display: block; text-align: center; font-size: 11px; line-height: 13px; font-weight: 400; text-shadow: 0 1px 2px #000; } #status-line { display: flex; gap: 10px; font-size: 12px; color: #d7cdb6; text-shadow: 0 1px 2px #000; white-space: nowrap; } #status-line b { color: #ffe08a; font-weight: 600; } #status-line em { font-style: normal; color: #8fb8ff; } #st-lawful-wrap.chaotic em, #st-lawful-wrap.chaotic b { color: #ff7a6b; } #status-gold { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #ffe08a; text-shadow: 0 1px 2px #000; } .coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #d9a520 60%, #8a6210); } /* 右上地圖 */ #map-plate { position: absolute; top: calc(6px + var(--sat)); right: calc(6px + var(--sar)); width: 122px; padding: 3px 4px; text-align: center; background: var(--wood); border: 2px solid #8a6a3e; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.5); } #hud-map { display: block; font-size: 14px; color: #f6e6c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hud-pos { display: block; font-size: 11px; color: #d4bf94; } #minimap-box { position: absolute; top: calc(56px + var(--sat)); right: calc(10px + var(--sar)); width: 114px; height: 114px; border-radius: 50%; overflow: hidden; border: 3px solid #8a6a3e; box-shadow: 0 2px 8px rgba(0,0,0,.6); cursor: pointer; background: #0b0a08; } #minimap { display: block; width: 100%; height: 100%; } #minimap-box.big { width: min(300px, calc(100vw - 20px)); height: min(300px, calc(100vw - 20px)); z-index: 4; } #side-buttons { position: absolute; top: calc(176px + var(--sat)); right: calc(10px + var(--sar)); display: flex; gap: 8px; } .round { width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%; font-size: 12px; font-weight: 700; letter-spacing: .02em; background: radial-gradient(circle at 35% 30%, #4b5470, #1f2333); border: 2px solid #8b93ad; color: #e8ecff; box-shadow: 0 2px 6px rgba(0,0,0,.6); } .round.on { background: radial-gradient(circle at 35% 30%, #6fa0ff, #2449a8); border-color: #bcd2ff; box-shadow: 0 0 10px rgba(110,160,255,.8); } .round.pvp.on { background: radial-gradient(circle at 35% 30%, #ff7a63, #8e1f15); border-color: #ffb3a3; box-shadow: 0 0 10px rgba(255,100,80,.8); } /* 聊天 */ #chat-log { position: absolute; left: calc(var(--tabs-w) + 8px + var(--sal)); width: min(calc(100vw - var(--tabs-w) - 20px), 380px); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--form-h) + var(--hot-h) + 16px); list-style: none; margin: 0; padding: 2px 6px; max-height: 20dvh; overflow-y: auto; pointer-events: auto; font-size: 12.5px; line-height: 1.45; text-shadow: 0 1px 2px #000, 0 0 3px #000; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #chat-log li { word-break: break-all; } #chat-log .sys { color: #9fd38b; } #chat-log .shout { color: #f0c860; } #chat-log .world { color: #8fc6ff; } #chat-log .clan { color: #ffb36b; } #chat-log .party { color: #7fe3d0; } #chat-log .whisper { color: #e59be8; } #chat-log .err { color: var(--danger); } #chat-tabs { position: absolute; left: calc(4px + var(--sal)); width: var(--tabs-w); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + 6px); display: flex; flex-direction: column; gap: 3px; } #chat-tabs button { min-height: 0; height: 30px; padding: 0; font-size: 12px; border-radius: 4px; background: linear-gradient(#b89a6a, #8a6c40); color: #3a2612; border: 1px solid #5a4020; font-weight: 600; } #chat-tabs button.on { background: linear-gradient(#f2d48f, #c99a45); color: #2a1a08; box-shadow: 0 0 6px rgba(255,210,120,.6); } #chat-form { position: absolute; left: calc(var(--tabs-w) + 8px + var(--sal)); right: calc(6px + var(--sar)); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + 6px); height: var(--form-h); display: flex; gap: 6px; } #chat-form input { margin: 0; flex: 1; padding: 8px 12px; border-radius: 6px; background: rgba(240,232,214,.92); color: #2a1f12; border-color: #8a6a3e; } #chat-form input::placeholder { color: #8b7d66; } #chat-form button { min-height: 0; padding: 0 16px; font-weight: 700; background: linear-gradient(#f2c55c, #c88a1e); color: #3a2208; border-color: #8a5a10; } /* 快捷欄 */ #hotbar { position: absolute; left: calc(var(--tabs-w) + 8px + var(--sal)); right: calc(6px + var(--sar)); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--form-h) + 12px); height: var(--hot-h); display: flex; gap: 6px; } #hotbar .slot { position: relative; flex: 1; min-height: 0; padding: 0; border-radius: 6px; background: rgba(20,16,10,.55); border: 1px solid rgba(160,130,80,.6); display: grid; place-items: center; } #hotbar .slot.empty { background: rgba(20,16,10,.3); } #hotbar .slot .count { position: absolute; right: 3px; bottom: 1px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; } #hotbar .slot .gone { font-size: 10px; color: #8b7d66; } #hotbar .home { flex: 1.1; font-size: 13px; font-weight: 700; color: #cfe3ff; background: radial-gradient(circle at 50% 30%, #2c4f86, #142443); border-color: #6c90c8; } /* 底部導覽 + 經驗條 */ #bottom-nav { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + var(--exp-h)); height: var(--nav-h); display: flex; padding: 0 calc(4px + var(--sar)) 0 calc(4px + var(--sal)); background: linear-gradient(#e8d6ae, #c9ad78); border-top: 2px solid #8a6a3e; box-shadow: 0 -2px 8px rgba(0,0,0,.4); } #bottom-nav button { flex: 1; min-height: 0; padding: 4px 0 2px; background: none; border: none; border-radius: 0; color: #5a4020; font-size: 11px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } #bottom-nav button.on { background: rgba(90,64,32,.18); color: #2a1a08; } .ico { width: 30px; height: 30px; background: #6b5030; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } #bottom-nav button.on .ico { background: #3a2612; } .ico-clan { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm0 4 2 4h4l-3 3 1 4-4-2-4 2 1-4-3-3h4l2-4Z'/%3E%3C/svg%3E"); } .ico-char { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 5 5.2 5 9v4l-2 3v2h3v4h12v-4h3v-2l-2-3V9c0-3.8-2.6-7-7-7Zm-4 9h8v2H8v-2Z'/%3E%3C/svg%3E"); } .ico-bag { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 3h2a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2l1-3Zm-1 7v2h8v-2H8Z'/%3E%3C/svg%3E"); } .ico-skill { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-3a7 7 0 1 1-7-7V2Zm0 6a4 4 0 1 0 4 4h-3a1 1 0 1 1-1-1V8Zm2-6v6l4-4-4-2Z'/%3E%3C/svg%3E"); } .ico-gear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 2-.6 2.6-2 .9L5 4.2 3.2 6l1.3 2.4-.9 2L1 11v2.6l2.6.6.9 2L3.2 18.6 5 20.4l2.4-1.3 2 .9L10 22h2.6l.6-2.6 2-.9 2.4 1.3 1.8-1.8-1.3-2.4.9-2L22 13V10.4l-2.6-.6-.9-2L19.8 5.4 18 3.6 15.6 4.9l-2-.9L13 2h-3Zm1.3 6.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Z'/%3E%3C/svg%3E"); } #exp-bar { position: absolute; left: 0; right: 0; bottom: var(--sab); height: var(--exp-h); background: #2a2016; } #exp-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(#f2c55c, #b5801c); } #exp-bar b { position: relative; display: block; text-align: center; font-size: 10px; line-height: var(--exp-h); font-weight: 400; color: #f6e6c0; text-shadow: 0 1px 2px #000; } /* 面板:木框 + 羊皮紙 */ #panel { position: absolute; z-index: 6; left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); top: calc(8px + var(--sat)); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + 6px); display: flex; flex-direction: column; background: #3b2c1c; border: 3px solid #a07c48; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.7), inset 0 0 0 2px #2a1d10; } #panel header { position: relative; display: flex; justify-content: center; align-items: center; padding: 10px 44px 6px; } #panel-title { margin: 0; padding: 4px 26px; font-size: 18px; color: #3a2208; letter-spacing: .2em; background: linear-gradient(#f0b862, #c47b2a); border: 2px solid #7a4a14; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.5); } #panel-close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a5c, #c2410c); border: 2px solid #fff1d6; color: #fff; font-size: 16px; font-weight: 700; } #panel-tabs { display: flex; gap: 4px; padding: 0 10px; border-bottom: 1px solid #6b5030; } #panel-tabs button { flex: 1; min-height: 38px; padding: 0; background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; color: #c9b48a; font-size: 15px; } #panel-tabs button.on { color: #fff3d6; border-bottom-color: #f2c55c; } #panel-body { flex: 1; overflow-y: auto; margin: 8px; padding: 10px; background: var(--parch); color: #3a2a16; border-radius: 6px; box-shadow: inset 0 0 12px rgba(90,64,32,.35); } #panel-body .hint { color: #7a6544; margin: 10px 2px 0; } #panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 10px; color: #f6e6c0; font-size: 14px; } #panel-foot:empty { display: none; } #panel-foot .cap { padding: 4px 10px; background: rgba(0,0,0,.3); border-radius: 4px; } #panel-foot .gold { color: #ffe08a; } .empty { text-align: center; color: #7a6544; padding: 20px 0; margin: 0; } /* 背包格子 */ .inv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .inv-grid .cell { position: relative; aspect-ratio: 1; min-height: 0; padding: 0; display: grid; place-items: center; background: linear-gradient(#5a4630, #3d2e1e); border: 2px solid #7a5f3c; border-radius: 6px; } .inv-grid .cell.blank { background: rgba(90,70,48,.25); border-color: rgba(122,95,60,.35); } .inv-grid .cell.equipped { border-color: #f2c55c; box-shadow: 0 0 6px rgba(242,197,92,.7); } .inv-grid .count { position: absolute; right: 3px; bottom: 1px; font-size: 11px; color: #ffe9a8; text-shadow: 0 1px 2px #000; } .inv-grid .eq { position: absolute; left: 3px; top: 1px; font-size: 10px; font-style: normal; color: #f2c55c; font-weight: 700; } canvas.icon { image-rendering: pixelated; } /* 角色 */ .char-head { text-align: center; font-size: 16px; font-weight: 700; } .char-exp { text-align: center; font-size: 12px; color: #6b5636; margin-bottom: 8px; } .char-grid { display: grid; grid-template-columns: 54px 1fr 54px; gap: 8px; align-items: start; } .equip-col { display: flex; flex-direction: column; gap: 6px; } .equip { aspect-ratio: 1; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(#4a3a28, #2e2318); border: 2px solid #7a5f3c; color: #8a7556; font-size: 10px; } .equip.has { border-color: #f2c55c; } .char-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; background: radial-gradient(ellipse at 50% 70%, #c9b48a, transparent 70%); border-radius: 8px; } .char-center canvas { image-rendering: pixelated; } .char-bars { width: 100%; padding: 0 6px; } .mini { margin-top: 4px; padding: 1px 0; font-size: 11px; text-align: center; color: #fff; border-radius: 3px; text-shadow: 0 1px 1px #000; } .mini.hp { background: linear-gradient(#ef6a5c, #b22d22); } .mini.mp { background: linear-gradient(#6c9cf0, #2a55b4); } .char-stats { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 4px 6px; margin: 12px 0 0; padding: 8px 10px; background: #2f2418; color: #f2e4c4; border-radius: 6px; font-size: 13px; } .char-stats dt { color: #c9b48a; } .char-stats dd { margin: 0; font-weight: 700; } /* 技能 */ .skill-group h4 { margin: 4px 0 6px; font-size: 15px; color: #5a3d16; } .skill-row { display: grid; grid-template-columns: 38px repeat(8, 1fr); gap: 3px; margin-bottom: 4px; align-items: center; } .skill-row .tier { font-size: 11px; color: #6b5636; text-align: center; line-height: 1.1; } .skill { aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; background: #5a4630; border: 1px solid #3d2e1e; font-size: 9px; line-height: 1.1; color: #fff3d6; text-align: center; overflow: hidden; } .skill.learned { background: linear-gradient(#7a5ad0, #432c8c); border-color: #c8b6ff; } /* 設定 */ .set-row { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; background: #2f2a3a; color: #e9e3f6; border-radius: 6px; } .set-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; background: #15121c; border-radius: 4px; } .set-mid { flex: 1; min-width: 0; } .set-label { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .set-label b { font-size: 15px; } .set-label em { font-style: normal; font-size: 12px; color: #f2c55c; } .set-mid input[type=range] { width: 100%; margin: 6px 0 0; padding: 0; accent-color: #f2a93b; background: none; border: none; } .toggle { flex: none; min-height: 36px; width: 64px; padding: 0; background: linear-gradient(#9b2a22, #6a150f); border-color: #c2483d; color: #fff; font-weight: 700; } .toggle.on { background: linear-gradient(#2d5fb8, #183b7c); border-color: #6c90c8; } /* 道具選單(底部抽屜) */ .sheet { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h)); max-height: 62dvh; display: flex; flex-direction: column; padding: 10px calc(12px + var(--sar)) 12px calc(12px + var(--sal)); z-index: 7; background: var(--panel); border-top: 2px solid #8a6a3e; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.6); } .sheet header { display: flex; align-items: center; justify-content: space-between; } .sheet header h3 { margin: 0; } .sheet header button { min-height: 40px; width: 44px; padding: 0; } .is-head { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 15px; } .is-head canvas { background: #2a2016; border: 1px solid var(--line); border-radius: 6px; } .is-actions { display: flex; gap: 8px; } .is-actions button { flex: 1; } .is-hotbar { display: flex; align-items: center; gap: 6px; margin-top: 10px; } .is-hotbar .hint { margin: 0; flex: 1; } .slot-pick { min-height: 40px; width: 40px; padding: 0; } /* NPC 對話 / 商店(和背包同樣是底部抽屜) */ #dialog { z-index: 7; } #dlg-note { margin: 4px 0 8px; } #dlg-body { overflow-y: auto; } .menu-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 8px; text-align: left; } .menu-btn small { color: #f3dca6; opacity: .85; } .shop-row { display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid rgba(90,70,38,.4); } .shop-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-row .pr { color: var(--gold); font-size: 13px; min-width: 64px; text-align: right; } .qty { display: flex; align-items: center; gap: 4px; } .qty button { min-height: 36px; width: 36px; padding: 0; font-size: 18px; } .qty b { width: 30px; text-align: center; font-weight: 400; } #dlg-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; } #dlg-foot span { flex: 1; color: var(--gold); } #dead { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 20px 28px; text-align: center; z-index: 7; } #dead p { margin: 0 0 12px; font-size: 17px; } #toast { position: fixed; left: 50%; top: calc(26% + var(--sat)); transform: translateX(-50%); color: #ffd36b; font-size: 16px; text-shadow: 0 2px 4px #000; pointer-events: none; transition: opacity .4s; opacity: 0; white-space: nowrap; } /* 橫式手機:高度很矮,面板改右側、聊天縮短 */ @media (orientation: landscape) and (max-height: 500px) { :root { --nav-h: 46px; --hot-h: 42px; --form-h: 36px; } #status { right: auto; width: min(44vw, 360px); } #chat-log { max-height: 22dvh; width: min(40vw, 340px); } #hotbar, #chat-form { right: auto; width: min(52vw, 420px); } #minimap-box { width: 92px; height: 92px; } #side-buttons { top: calc(150px + var(--sat)); } #panel { left: auto; width: min(460px, 70vw); } .sheet { left: auto; width: min(380px, 60vw); } } /* 平板 / 電腦:面板與聊天不要拉滿 */ @media (min-width: 900px) and (min-height: 600px) { #status { right: auto; width: 420px; } #hotbar, #chat-form { right: auto; width: 460px; } #panel { left: 50%; right: auto; width: 460px; transform: translateX(-50%); } .sheet { left: auto; right: 12px; width: 360px; border-radius: 12px; } } #panel-foot .learn { min-height: 38px; padding: 0 16px; font-size: 14px; } .set-ico.pick { cursor: pointer; outline: 2px solid #f2c55c; outline-offset: -2px; } .potion-pick { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; margin-top: 8px; text-align: left; background: #221d15; border-color: var(--line); } .potion-pick canvas { grid-row: 1 / 3; } .potion-pick .nm { font-size: 16px; } .potion-pick small { color: var(--muted); font-size: 12px; } .potion-pick.on { border-color: #f2c55c; box-shadow: 0 0 6px rgba(242,197,92,.6); } /* 頭像下方:狀態圖示 */ #buffbar { position: absolute; top: calc(74px + var(--sat)); left: calc(6px + var(--sal)); max-width: calc(100vw - 150px); display: flex; flex-wrap: wrap; gap: 4px; } #buffbar:empty { display: none; } .buff { position: relative; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 4px; background: #15121c; border: 1px solid #8a6a3e; box-shadow: 0 1px 3px rgba(0,0,0,.6); } .buff canvas { display: block; width: 26px; height: 26px; border-radius: 3px; } .buff.bad { border-color: #c2483d; } .buff .left { position: absolute; right: 1px; bottom: 0; font-size: 10px; font-style: normal; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; } #buff-tip { position: absolute; top: calc(106px + var(--sat)); left: calc(6px + var(--sal)); padding: 4px 10px; font-size: 13px; color: #ffe9a8; background: rgba(12,10,7,.85); border: 1px solid #8a6a3e; border-radius: 6px; pointer-events: none; } /* 離線收益(重新登入時的掛機結算) */ #offline-report { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); } #offline-report.hidden { display: none; } .or-frame { position: relative; width: min(100%, 380px); max-height: calc(100% - 40px); display: flex; flex-direction: column; padding: 34px 14px 16px; border-radius: 10px; border: 3px solid #d9c9a3; background: linear-gradient(#4a3b2e, #3a2e24); box-shadow: 0 0 0 2px #7a6447, inset 0 0 18px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.6); } .or-title { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 34px 8px; white-space: nowrap; font-size: 21px; letter-spacing: 2px; color: #fff4d2; text-shadow: 0 2px 0 #6b3510, 0 0 6px rgba(0, 0, 0, 0.6); border-radius: 6px; border: 2px solid #f0b46a; background: linear-gradient(#d9893f, #b0592a 60%, #8e431f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #5e2d10, 0 6px 12px rgba(0, 0, 0, 0.5); } .or-close { position: absolute; top: -16px; right: -12px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ffe1b0; background: radial-gradient(circle at 40% 35%, #ff9a5a, #d8572a 60%, #a63d1a); color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 3px 0 #6b2a10, 0 4px 10px rgba(0, 0, 0, 0.5); cursor: pointer; } .or-sub { margin: 0 0 8px; text-align: center; font-size: 12px; color: #c9b58c; } .or-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 4px; } .or-rows { display: grid; gap: 7px; } .or-row { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; background: linear-gradient(#8a7558, #6f5d45); border: 1px solid #a68f6b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 rgba(0, 0, 0, 0.35); } .or-row b { width: 76px; text-align: center; color: #f6ead0; font-size: 16px; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .or-row span { flex: 1; text-align: center; color: #7dff5a; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); word-break: break-all; } .or-row span.loss { color: #ff6a5a; } .or-row span.warn { color: #ffd166; } .or-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 12px; padding: 4px 4px 2px; } .or-items.hidden { display: none; } .or-item { display: flex; align-items: center; gap: 8px; min-width: 0; color: #efe2c2; font-size: 14px; } .or-item canvas { flex: none; } .or-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 快捷欄的魔法格 / 選魔法 */ #hotbar .slot.skill { background: radial-gradient(circle at 50% 35%, rgba(92, 70, 160, .85), rgba(30, 20, 60, .85)); border-color: #9d86e0; } #hotbar .slot .sk { display: block; padding: 0 2px; font-size: 11px; line-height: 1.15; color: #efe6ff; text-shadow: 0 1px 2px #000; word-break: break-all; } .skill-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 6px 0 10px; } .skill-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 4px; border-radius: 8px; border: 1px solid #9d86e0; background: linear-gradient(#3b2d6b, #241a45); color: #efe6ff; cursor: pointer; } .skill-pick .nm { font-size: 14px; font-weight: 700; } .skill-pick small { font-size: 11px; color: #b8a9e6; } /* 預先下載素材的進度(登入 / 選角畫面) */ #preload { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(360px, calc(100vw - 32px)); font-size: 12px; color: var(--text); text-align: center; z-index: 5; pointer-events: none; transition: opacity .6s; } #preload .bar { height: 4px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; margin-bottom: 4px; } #preload .bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; } #preload.done .bar { opacity: .4; } body.in-game #preload { opacity: 0; } /* 介面文字不能長按選取(手機會跳出複製選單);輸入框照常 */ body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* NPC 對話框壓矮一點,不要蓋住半張地圖 */ #dialog { max-height: 40dvh; padding-top: 6px; padding-bottom: 8px; } #dialog header h3 { font-size: 15px; } #dialog header button { min-height: 34px; width: 38px; } #dlg-note, #dlg-body > p { margin: 2px 0 6px; font-size: 13px; } #dlg-body .hint { font-size: 12px; margin: 4px 0; } #dialog .menu-btn { min-height: 38px; padding: 6px 12px; margin-bottom: 6px; font-size: 15px; } #dialog .menu-btn small { font-size: 12px; } /* 選角畫面(參考手機版天堂:沒有外框、金色標題、角色站立圖 + 能力值) */ #screen-chars { background: transparent; border: none; box-shadow: none; max-width: 460px; } #screen-chars h2 { text-align: center; font-size: 28px; font-weight: 800; letter-spacing: .1em; margin: 4px 0 22px; color: #ffe08a; text-shadow: 0 0 6px rgba(255, 170, 40, .9), 0 0 14px rgba(255, 140, 20, .5), 0 2px 2px #000; } #char-list li { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 4px 10px; min-height: 136px; padding: 4px 8px; margin-bottom: 10px; background: transparent; border: 1px solid transparent; border-radius: 10px; } #char-list li.sel { border-color: rgba(216, 180, 106, .55); background: rgba(216, 180, 106, .08); } #char-list li.empty { display: block; min-height: 0; text-align: center; cursor: default; } #char-list canvas.cfig { width: 96px; height: 132px; mix-blend-mode: screen; } /* 立繪是黑底,用濾色融進背景 */ #char-list .cinfo { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #char-list .cinfo b { font-size: 21px; font-weight: 800; color: #ffd36b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 5px rgba(255, 150, 30, .7), 0 2px 2px #000; } #char-list .cinfo span { font-size: 16px; color: var(--text); white-space: pre; } #char-list .cstats { display: grid; grid-template-columns: auto auto; gap: 4px 14px; font-size: 14px; color: #e6cf98; } #char-list .cstats b { font-weight: 800; color: #f6e2b0; margin-left: 2px; } .gold-btn { display: block; width: min(70%, 260px); min-height: 52px; margin: 18px auto 12px; font-size: 21px; font-weight: 800; letter-spacing: .3em; color: #5a3300; background: linear-gradient(#ffe48a, #f4b636 55%, #e39a1f); border: 3px solid #c9851a; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(255, 245, 200, .7), 0 3px 8px rgba(0, 0, 0, .6); } .gold-btn:active { filter: brightness(.92); } @media (max-width: 380px) { #char-list .cstats { font-size: 12px; gap: 3px 8px; } #char-list .cinfo b { font-size: 18px; } } /* ---- 手機直式的 HUD 比例:對照手機版天堂網頁(412px 寬時量測) ---- */ :root { --nav-h: 48px; --form-h: 24px; --tabs-w: 26px; --exp-h: 12px; } #status { right: auto; width: 204px; } #portrait { width: 51px; height: 60px; } #portrait canvas { left: 2px; top: 2px; width: 46px; height: 46px; } .bar { height: 12px; margin-bottom: 2px; } .bar b { font-size: 10px; line-height: 10px; } #map-plate { width: 106px; padding: 2px 3px; } #hud-map { font-size: 13px; } #hud-pos { font-size: 10px; } #minimap-box { top: calc(50px + var(--sat)); width: 102px; height: 102px; } #side-buttons { top: calc(158px + var(--sat)); } .round { width: 42px; height: 42px; font-size: 11px; } #chat-tabs { gap: 2px; } #chat-tabs button { height: 22px; font-size: 11px; border-radius: 3px; } #chat-form input { padding: 0 10px; font-size: 13px; border-radius: 4px; } #chat-form button { padding: 0 12px; font-size: 13px; border-radius: 4px; } #bottom-nav button { font-size: 0; gap: 0; } /* 只留圖示(按鈕本身仍有文字給輔助工具) */ #bottom-nav .ico { width: 30px; height: 30px; } /* NPC 對話框:不透明、蓋在聊天文字上面,靠右小一點,不擋半張地圖 */ #dialog { z-index: 9; background: #1b160f; left: auto; right: calc(6px + var(--sar)); width: min(340px, calc(100vw - 12px)); border-radius: 12px; border: 2px solid #8a6a3e; max-height: 38dvh; } #daynight { position: absolute; top: calc(48px + var(--sat)); right: calc(96px + var(--sar)); font-size: 20px; line-height: 1; color: #ffe08a; text-shadow: 0 0 6px rgba(255, 200, 90, .8), 0 1px 2px #000; pointer-events: none; z-index: 3; } /* 選角:建立 / 刪除角色、刪除倒數 */ .char-actions { display: flex; gap: 8px; } .char-actions button { flex: 1; width: auto; } button.danger { color: #ffb4a8; border-color: #8a3a2e; } #del-confirm { margin-top: 12px; padding: 12px; text-align: center; border: 1px solid #8a3a2e; border-radius: 8px; background: rgba(60, 14, 10, .7); } #del-confirm p { margin: 0 0 10px; font-size: 15px; } #del-confirm b { color: #ffd36b; } #del-left { display: inline-block; min-width: 1.4em; font-size: 20px; font-weight: 800; color: #ff7a63; } #del-confirm button { width: 60%; } #daynight { font-size: 13px; font-weight: 700; white-space: nowrap; right: calc(88px + var(--sar)); top: calc(50px + var(--sat)); padding: 1px 6px; border-radius: 10px; background: rgba(0, 0, 0, .45); } /* 設定 → Buff:上面道具、下面輔助魔法,點圖示開 / 關(對照手機版天堂) */ .buff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; justify-items: center; padding: 18px 10px; margin-bottom: 12px; background: #3c4558; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .buff-grid.skills { min-height: 120px; align-content: start; } .buff-cell { width: 52px; height: 52px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 4px; background: #1c1a17; border: 2px solid #3a3530; opacity: .45; filter: grayscale(.6); } .buff-cell.on { opacity: 1; filter: none; border-color: #f2c55c; box-shadow: 0 0 8px rgba(242, 197, 92, .6); } .buff-cell canvas { width: 40px; height: 40px; } /* 學習魔法(商店樣式:木牌標題、羊皮紙列、綠色學習鈕) */ #learn { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(0, 0, 0, .35); } #learn.hidden { display: none; } .learn-box { position: relative; width: min(400px, calc(100vw - 16px)); height: min(76dvh, 680px); display: flex; flex-direction: column; padding: 34px 12px 14px; border-radius: 10px; background: linear-gradient(#efe3c4, #d9c59a); border: 3px solid #b39462; box-shadow: 0 8px 30px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 250, 230, .6); } .learn-box .plank { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); margin: 0; padding: 6px 42px; font-size: 22px; font-weight: 800; color: #fff3c8; letter-spacing: .15em; white-space: nowrap; background: linear-gradient(#e9a25a, #b9682a); border: 3px solid #7a4318; border-radius: 6px; text-shadow: 0 2px 2px #5a2a08; } .x-btn { position: absolute; right: -8px; top: -14px; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; font-size: 18px; font-weight: 800; color: #fff; background: radial-gradient(circle at 40% 35%, #ff9a5c, #d0501c); border: 3px solid #fff1d8; } .learn-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 10px; font-size: 16px; color: #4a3218; } .learn-head .gold, .learn-info .gold { color: #b07a10; font-weight: 800; } .learn-head .gold::before, .learn-info .gold::before { content: '●'; color: #e8b020; margin-right: 4px; } #learn-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; } .learn-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(#f2e6c8, #e0cfa4); border: 2px solid #c2a676; border-radius: 6px; } .learn-row canvas { width: 48px; height: 48px; background: #5a4a36; border: 2px solid #8a7250; border-radius: 4px; } .learn-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .learn-info b { font-size: 16px; color: #3a2a14; } .learn-btn { min-height: 0; height: 38px; padding: 0 22px; font-size: 15px; font-weight: 800; color: #2a4a08; border-radius: 4px; background: linear-gradient(#b8f070, #5cbf2a); border: 2px solid #3f8a18; box-shadow: inset 0 0 0 2px rgba(240, 255, 200, .6); } .learn-btn:disabled { filter: grayscale(.8); } .learn-empty { text-align: center; color: #6a5030; margin-top: 30px; } #hotbar .slot canvas.fill { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 4px; } #hotbar .slot.skill { padding: 0; overflow: hidden; } #hotbar .slot .count { z-index: 1; } /* 技能面板:每階 8 格,學會的格子填滿魔法圖示(對照手機版天堂) */ .skill-row { grid-template-columns: 50px repeat(8, 1fr); gap: 5px; margin-bottom: 6px; } .skill-row .tier { white-space: pre-line; font-size: 11px; font-weight: 700; color: #5a3d16; } .skill { position: relative; background: #4a3c2c; border: 2px solid #b8a27a; border-radius: 6px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .6); } .skill.learned { background: #1e1812; border-color: #d8c08c; cursor: pointer; } .skill canvas { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 4px; } /* 快捷欄選魔法:圖示 + 名稱 / 耗魔 */ .skill-pick { flex-direction: row; gap: 8px; justify-content: flex-start; padding: 6px 8px; } .skill-pick canvas { width: 40px; height: 40px; flex: none; border-radius: 4px; } .skill-pick .txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .skill-pick-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .set-ico canvas.set-skill { width: 36px; height: 36px; border-radius: 4px; } /* ==== 1.82 原版介面圖(tools/build_ui182.py 從客戶端切出,輸出 assets/ui182/)==== */ /* 視窗:石板 + 銅邊九宮格(50.img),內容區深色石頭、淺色字 */ #panel, #dialog, #itemsheet, .learn-box, .sheet { background: none; border: 14px solid transparent; border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); border-image: url("assets/ui182/panel.webp?v=tmiqhy") 16 fill / 14px stretch; } #panel-body { background: rgba(8, 8, 8, .45); color: #e8dcc0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 12px rgba(0, 0, 0, .6); } #panel-body .hint, .empty { color: #a8987a; } .char-exp, .skill-row .tier { color: #b8a47e; } .skill-group h4 { color: #e8c878; } .char-center { background: radial-gradient(ellipse at 50% 70%, rgba(150, 140, 120, .35), transparent 70%); } #panel-tabs { border-bottom-color: #5a4a30; } /* 標題 / 按鈕:銅邊長條(600.img) */ #panel-title, .learn-box .plank, .gold-btn, #chat-form button, #dlg-ok, .is-actions button, .learn-btn, #chat-tabs button, #map-plate { background: none; border: 0 solid transparent; border-width: 5px 7px; border-radius: 0; box-shadow: none; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch; color: #f0d890; text-shadow: 0 1px 2px #000, 0 0 3px #000; } #panel-title, .learn-box .plank { padding: 4px 28px; } .gold-btn:active, #chat-form button:active, #dlg-ok:active, .is-actions button:active, .learn-btn:active { filter: brightness(1.3); } #chat-tabs button { color: #c8b890; } #chat-tabs button.on { background: none; color: #ffe8a0; filter: brightness(1.45); box-shadow: none; } /* 關閉鈕:原版的 Close 小牌子 */ #panel-close, #is-close, #dlg-close, .x-btn { background: url("assets/ui182/close.webp?v=tmiqhy") center / 46px 22px no-repeat; border: none; box-shadow: none; image-rendering: pixelated; color: transparent; font-size: 0; width: 48px; height: 36px; min-height: 0; padding: 0; border-radius: 0; } /* 圓鈕(AUTO / PVP / 回城):536.img 銅框圓盤 */ .round, #hotbar .home { background: url("assets/ui182/round.webp?v=tmiqhy") center / 100% 100% no-repeat; border: none; border-radius: 50%; color: #f0d890; text-shadow: 0 1px 2px #000, 0 0 3px #000; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); } #hotbar .home { flex: none; aspect-ratio: 1; } .round.on { background: url("assets/ui182/round.webp?v=tmiqhy") center / 100% 100% no-repeat; filter: brightness(1.5); box-shadow: 0 0 12px rgba(255, 200, 90, .9); } .round.pvp.on { filter: hue-rotate(-25deg) saturate(1.8) brightness(1.4); box-shadow: 0 0 12px rgba(255, 90, 60, .9); } /* 格子:原版石頭道具格(489.img) */ #hotbar .slot, #hotbar .slot.empty, #hotbar .slot.skill, .inv-grid .cell, .inv-grid .cell.blank, .buff-cell, .skill, .equip { background: url("assets/ui182/slot.webp?v=tmiqhy") center / 100% 100% no-repeat; border: none; border-radius: 0; box-shadow: none; opacity: 1; } .inv-grid .cell.blank { opacity: .55; } .inv-grid .cell.equipped, .equip.has { box-shadow: inset 0 0 0 2px #d8b060, 0 0 6px rgba(216, 176, 96, .6); } .buff-cell.on, .skill.learned { box-shadow: inset 0 0 0 2px #d8b060, 0 0 8px rgba(216, 176, 96, .6); } /* 小地圖、地圖名牌 */ #minimap-box { border: 3px solid #9a7a48; box-shadow: 0 0 0 1px #2a2016, 0 2px 8px rgba(0, 0, 0, .7); } #map-plate { padding: 3px 6px; } #hud-map { color: #f0d890; } #hud-pos { color: #c8b890; } /* 底部:石頭底座 + 龍頭橫條(HP / MP)+ 原版選單圖示 */ :root { --dragon-h: calc(min(100vw, 412px) * 44 / 392); } #dock { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; height: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--form-h) + var(--hot-h) + 16px + var(--dragon-h) / 2); background: url("assets/ui182/stone.webp?v=tmiqhy") center / 100% 100%; box-shadow: 0 -2px 6px rgba(0, 0, 0, .6); } #dragon { position: absolute; left: 50%; transform: translateX(-50%); width: min(100vw, 412px); height: var(--dragon-h); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--form-h) + var(--hot-h) + 14px); background: url("assets/ui182/dragon.webp?v=tmiqhy") center / 100% 100% no-repeat; pointer-events: none; z-index: 1; } /* 紅條 / 藍條的位置照 406.img(切圖 392x44 裡 HP 在 x32、MP 在 x220,y19,高 20) */ #dragon .bar { position: absolute; top: calc(19 / 44 * 100%); height: calc(20 / 44 * 100%); margin: 0; background: none; border: none; border-radius: 0; overflow: hidden; } #dragon .bar.hp { left: calc(32 / 392 * 100%); width: calc(141 / 392 * 100%); } #dragon .bar.mp { left: calc(220 / 392 * 100%); width: calc(136 / 392 * 100%); } #dragon .bar i { position: absolute; inset: 0 auto 0 0; background: url("assets/ui182/hp.webp?v=tmiqhy") left center / auto 100% no-repeat; } #dragon .bar.hp i { background-size: calc(141 / 392 * min(100vw, 412px)) 100%; } #dragon .bar.mp i { background-image: url("assets/ui182/mp.webp?v=tmiqhy"); background-size: calc(136 / 392 * min(100vw, 412px)) 100%; filter: saturate(2.2) hue-rotate(8deg); } #dragon .bar b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 2px; font: 400 10px/1 Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; letter-spacing: .02em; } #dragon .bar.hp b::before { content: "HP:"; } #dragon .bar.mp b::before { content: "MP:"; } #chat-log { bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--form-h) + var(--hot-h) + 18px + var(--dragon-h)); } #chat-tabs { bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--form-h) + var(--hot-h) + 18px + var(--dragon-h)); } #hotbar, #chat-form { left: calc(6px + var(--sal)); } #bottom-nav { background: url("assets/ui182/stone.webp?v=tmiqhy") center / 100% 100%; border: none; border-top: 2px solid #6a5434; border-image: none; box-shadow: inset 0 1px 0 #2a2016; } #bottom-nav .ico182 { width: 28px; height: 31px; image-rendering: auto; border: 1px solid #2a2016; box-shadow: 0 1px 3px rgba(0, 0, 0, .7); } #bottom-nav button.on { background: rgba(255, 220, 140, .12); } #bottom-nav button.on .ico182 { filter: brightness(1.25); box-shadow: 0 0 0 1px #d8b060, 0 0 8px rgba(216, 176, 96, .7); } #exp-bar { background: url("assets/ui182/exp0.webp?v=tmiqhy") center / 100% 100%; } #exp-bar i { background: url("assets/ui182/exp.webp?v=tmiqhy") left center / 100vw 100%; } #chat-form input { background: rgba(10, 10, 10, .7); color: #e8dcc0; border: 1px solid #5a4a30; border-radius: 0; } #chat-form input::placeholder { color: #8a7c62; } #chat-form button { padding: 0 10px; line-height: 1; } #status-main { padding-top: 2px; } @media (orientation: landscape) and (max-height: 500px), (min-width: 900px) and (min-height: 600px) { #dragon { left: calc(6px + var(--sal)); transform: none; } } /* 視窗中間用石頭底紋平鋪(九宮格中間拉伸會有條紋),外框照原圖 */ #panel, #dialog, #itemsheet, .learn-box, .sheet { background: url("assets/ui182/stone.webp?v=tmiqhy") repeat center / 696px 120px; background-clip: padding-box; border-image: url("assets/ui182/panel.webp?v=tmiqhy") 16 / 14px round; } .set-row { background: rgba(0, 0, 0, .38); color: #e8dcc0; border: 1px solid #4a3e2a; border-radius: 0; } .set-ico { background: url("assets/ui182/slot.webp?v=tmiqhy") center / 100% 100%; border-radius: 0; } .set-label em { color: #e0c070; } .toggle, .toggle.on { border: 0 solid transparent; border-width: 5px 7px; border-radius: 0; box-shadow: none; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch; color: #8a7c62; text-shadow: 0 1px 2px #000; } .toggle.on { color: #ffe08a; filter: brightness(1.5) sepia(.5); } .set-mid input[type=range] { accent-color: #c89a48; } /* 修正:回城是圓鈕、聊天頻道標籤較窄、MP 條偏藍 */ #hotbar .slot.home { background: url("assets/ui182/round.webp?v=tmiqhy") center / contain no-repeat; border-radius: 50%; flex: none; aspect-ratio: 1; } #chat-tabs button { border-width: 3px 4px; border-image-width: 3px 4px; font-size: 10px; white-space: nowrap; letter-spacing: -.05em; } #dragon .bar.mp i { filter: saturate(1.6) hue-rotate(-28deg) brightness(1.1); } /* 商店買賣清單:視窗放大(一般對話維持小視窗,不擋地圖) */ #dialog.shop { max-height: min(72dvh, 640px); width: min(440px, calc(100vw - 12px)); display: flex; flex-direction: column; } #dialog.shop #dlg-body { flex: 1; min-height: 0; overflow-y: auto; } #dialog.shop .shop-row { min-height: 50px; font-size: 15px; } #dialog.shop .shop-row .pr { font-size: 14px; } /* 快捷欄沒放東西的格子:完全透明 */ #hotbar .slot.empty { background: none; border: none; box-shadow: none; opacity: 1; } .is-actions button.danger { color: #ffb4a0; } /* ==== 底部版面(照 1.82 原版):快捷欄在龍頭橫條上方;橫條下面的石頭區是聊天訊息 → 輸入列 → 頻道標籤(最下面) ==== */ :root { color-scheme: dark; --tabrow-h: 24px; --form-h: 28px; --log-h: 74px; --hot-h: 48px; } #chat-tabs { left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); width: auto; height: var(--tabrow-h); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + 1px); flex-direction: row; gap: 4px; } #chat-tabs button { flex: 1; height: 100%; font-size: 12px; letter-spacing: 0; } #chat-form { left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--tabrow-h) + 5px); height: var(--form-h); } #chat-log { left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); width: auto; height: var(--log-h); max-height: var(--log-h); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--tabrow-h) + var(--form-h) + 9px); padding: 2px 4px; font-size: 13px; line-height: 18px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); } #dragon { bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--tabrow-h) + var(--form-h) + var(--log-h) + 11px); } #dock { height: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--tabrow-h) + var(--form-h) + var(--log-h) + 11px + var(--dragon-h) / 2); } #hotbar { left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--tabrow-h) + var(--form-h) + var(--log-h) + 15px + var(--dragon-h)); } /* 沒放東西的格子:半透明,隱約看得到一格一格 */ #hotbar .slot.empty { background: rgba(0, 0, 0, .22); border: 1px solid rgba(220, 196, 140, .38); border-radius: 4px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .45); } @media (orientation: landscape) and (max-height: 500px), (min-width: 900px) and (min-height: 600px) { #chat-tabs, #chat-log { right: auto; width: min(52vw, 460px); } #chat-form, #hotbar { width: min(52vw, 460px); } } @media (orientation: landscape) and (max-height: 500px) { :root { --log-h: 40px; --hot-h: 40px; } } /* 底部再精簡一點(參考網頁版:下方介面約佔畫面三分之一);石頭底紋照原尺寸平鋪,不要拉伸變糊 */ :root { --log-h: 54px; --tabrow-h: 20px; --form-h: 24px; --nav-h: 40px; --hot-h: 44px; --exp-h: 9px; } /* 再緊湊一點,多留地圖可以點的地方 */ #dock, #bottom-nav { background: url("assets/ui182/stone.webp?v=tmiqhy") repeat left top / 696px 120px; } #chat-log { font-size: 12.5px; line-height: 17px; background: rgba(0, 0, 0, .35); } #chat-tabs button { font-size: 11px; } #bottom-nav .ico182 { width: 23px; height: 26px; } #bottom-nav button { padding-top: 0; padding-bottom: 4px; } /* 圖示往上一點,靠近頻道列 */ #exp-bar b { font-size: 9px; } /* 關閉鈕:原版 Close 小牌子放大後太糊,改成銅框石板 + 清楚的金色 ✕ */ #panel-close, #is-close, #dlg-close, .x-btn { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .6); background: none; border: 0 solid transparent; border-width: 5px 7px; font-size: 0; color: transparent; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch; display: grid; place-items: center; } #panel-close::before, #is-close::before, #dlg-close::before, .x-btn::before { content: "✕"; font-size: 20px; line-height: 1; font-weight: 700; color: #ffe08a; text-shadow: 0 0 2px #000, 0 1px 2px #000, 0 0 6px rgba(255, 200, 90, .6); } #panel-close:active, #is-close:active, #dlg-close:active, .x-btn:active { filter: brightness(1.4); } /* 素材下載完就不顯示進度列 */ #preload.done { display: none; } #login-form input:disabled { opacity: .5; } /* 回城冷卻中 */ #hotbar .slot.home.cool { filter: grayscale(.8) brightness(.6); } /* ==== 商店卡片(參考網頁版版面,1.82 石頭 / 銅邊風格) ==== */ #dialog.shop { max-height: min(78dvh, 680px); } .shop-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; font-size: 15px; color: #e8dcc0; } .shop-head .gold { color: #ffe08a; font-weight: 700; } .shop-head .gold::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #d9a520 60%, #8a6210); } .shop-list { display: flex; flex-direction: column; gap: 6px; } .shop-card { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(0, 0, 0, .35); border: 1px solid #5a4a30; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); } .shop-card canvas.icon { width: 40px; height: 40px; background: url("assets/ui182/slot.webp?v=tmiqhy") center / 100% 100%; padding: 2px; box-sizing: content-box; } .shop-card .info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .shop-card .nm { font-size: 15px; color: #f0e2c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop-card .cnt { margin-left: 6px; font-size: 13px; color: #c8b890; } .shop-card .pr { font-size: 15px; font-weight: 700; color: #ffe08a; } .shop-card .pr::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #d9a520 60%, #8a6210); } .shop-card .qty { gap: 2px; } .shop-card .qty button { width: 30px; min-height: 30px; height: 30px; font-size: 18px; font-weight: 700; color: #f0d890; padding: 0; background: none; border: 0 solid transparent; border-width: 4px 5px; border-radius: 0; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 4px 5px stretch; } .shop-card .qty b { width: 34px; font-size: 16px; color: #fff; } .shop-card .deal { min-height: 40px; padding: 0 12px; font-size: 15px; font-weight: 700; color: #ffe08a; background: none; border: 0 solid transparent; border-width: 5px 7px; border-radius: 0; text-shadow: 0 1px 2px #000; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch; filter: sepia(.4) brightness(1.15); } .shop-card .deal:active { filter: sepia(.4) brightness(1.5); } @media (max-width: 380px) { .shop-card { grid-template-columns: 40px 1fr auto; } .shop-card .deal { grid-column: 2 / 4; } } .shop-card .nm { white-space: normal; line-height: 1.2; } /* 商店卡片:名稱整行不換行(過長才省略);數量和按鈕疊在右邊一欄 */ .shop-card { grid-template-columns: 46px 1fr auto; } .shop-card .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .shop-card .ctl { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .shop-card .deal { min-height: 34px; } @media (max-width: 380px) { .shop-card { grid-template-columns: 40px 1fr auto; } .shop-card .deal { grid-column: auto; } } /* 快捷欄:格子改成正方形(原本被拉寬,魔法圖示變形) */ :root { --hot-h: 46px; } #hotbar { justify-content: space-between; } #hotbar .slot { flex: 0 0 auto; width: var(--hot-h); height: var(--hot-h); } #hotbar .slot canvas.fill { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); } /* 學習魔法視窗:配合石頭底紋改成淺色字,每列跟商店卡片一樣 */ .learn-head { color: #e8dcc0; } .learn-head .gold, .learn-info .gold { color: #ffe08a; } .learn-row { background: rgba(0, 0, 0, .35); border: 1px solid #5a4a30; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); } .learn-row canvas { background: url("assets/ui182/slot.webp?v=tmiqhy") center / 100% 100%; border: none; border-radius: 0; } .learn-info b { color: #f0e2c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .learn-empty { color: #c8b890; } .learn-btn { color: #ffe08a; filter: sepia(.4) brightness(1.15); } /* AUTO / PVP:沒開是灰的,開了發亮 */ .round:not(.on) { filter: grayscale(1) brightness(.55); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); color: #b8b0a0; } #btn-auto.on, #btn-pvp.on { color: #fff3c0; text-shadow: 0 0 6px rgba(255, 220, 120, .9), 0 1px 2px #000; } #btn-auto.on { filter: brightness(1.45) saturate(1.3); box-shadow: 0 0 14px rgba(255, 200, 90, .95), 0 0 4px rgba(255, 240, 180, .9); } /* 商店(購買 / 販賣)固定高度:道具少的販賣頁也跟購買頁一樣展開 */ #dialog.shop { height: min(78dvh, 680px); } #dialog.shop #dlg-body { display: flex; flex-direction: column; } #dialog.shop .shop-list { flex: 1; } /* 強化視窗 */ #panel-foot .enchant-open { margin-left: auto; } .enc-top { display: flex; align-items: flex-start; justify-content: space-around; padding: 10px 8px 4px; } .enc-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; } .enc-cell { width: 60px; height: 60px; display: grid; place-items: center; background: url("assets/ui182/slot.webp?v=tmiqhy") center / 100% 100%; } .enc-name { font-size: 13px; color: #e8dcc0; text-align: center; min-height: 18px; } .enc-plus { font-size: 30px; color: #f0d890; margin-top: 12px; } .enc-info { text-align: center; font-size: 14px; color: #c8b890; margin: 8px 0; } .enc-info.risk { color: #ffb08a; } .enc-msg { text-align: center; font-size: 15px; font-weight: 700; color: #ffe08a; margin-bottom: 6px; } .enc-go { width: min(70%, 240px); min-height: 44px; margin: 6px auto 12px; display: block; } .enc-go:disabled { filter: grayscale(.8) brightness(.7); } .enc-grid { margin-top: 4px; } .enc-info { margin: 6px 16px 8px; } .enc-lv { display: flex; justify-content: center; align-items: baseline; gap: 14px; font-weight: 800; margin-bottom: 8px; } .enc-lv .from { font-size: 22px; color: #c8b890; } .enc-lv .arrow { font-size: 22px; color: #a89870; } .enc-lv .to { font-size: 30px; color: #ffe08a; text-shadow: 0 0 8px rgba(255, 200, 90, .7); } .enc-bar { position: relative; height: 24px; background: rgba(0, 0, 0, .55); border: 1px solid #6a5434; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); overflow: hidden; } .enc-bar i { position: absolute; inset: 0 auto 0 0; transition: width .3s; } .enc-bar.safe i { background: linear-gradient(#7fd06a, #3d8a2a); } .enc-bar.mid i { background: linear-gradient(#f2c55c, #b5801c); } .enc-bar.low i { background: linear-gradient(#ef6a5c, #9a2a20); } .enc-bar b { position: relative; display: block; text-align: center; line-height: 24px; font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; } .enc-note { text-align: center; font-size: 13px; color: #c8b890; margin-top: 6px; } .enc-note.risk { color: #ffb08a; } .enc-warn { text-align: center; color: #ffb08a; } /* 選角:離線掛機中的角色 */ #char-list .cinfo .hunting { font-style: normal; font-size: 13px; font-weight: 700; color: #7fe08a; text-shadow: 0 0 6px rgba(120, 230, 130, .6), 0 1px 2px #000; } #char-list .cinfo .hunting::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #5fe06a; box-shadow: 0 0 6px #5fe06a; vertical-align: 1px; animation: huntPulse 1.4s ease-in-out infinite; } @keyframes huntPulse { 50% { opacity: .35; } } /* 角色頁:頭盔一大格 + 下面兩小格魔法頭盔 */ .helm-wrap { display: flex; flex-direction: column; gap: 3px; } .helm-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .equip.small { font-size: 9px; } .equip.small canvas { width: 22px; height: 22px; } #panel-foot .inv-sort { margin-left: auto; } #panel-foot .inv-sort + .enchant-open { margin-left: 6px; } #panel-foot .cap { white-space: nowrap; font-size: 13px; } #panel-foot .inv-sort, #panel-foot .enchant-open { white-space: nowrap; padding: 0 12px; min-width: 56px; } /* 捕捉按鈕(在可馴服的狗頭上) */ #capture-btn { position: absolute; z-index: 4; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 0; padding: 0; background: none; border: 0; } #capture-btn .cap-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #6b4a26, #2a1a0c 75%); border: 2px solid #d8a850; box-shadow: 0 0 8px rgba(255, 200, 90, .75), inset 0 0 6px #000; animation: capturePulse 1.2s ease-in-out infinite; } #capture-btn .cap-txt { font-size: 12px; font-weight: 800; line-height: 1; color: #ffd86a; text-shadow: 0 0 2px #000, 0 1px 2px #000; } #capture-btn.hidden { display: none; } @keyframes capturePulse { 50% { filter: brightness(1.35); } } /* 寵物選單 */ .pet-info { padding: 4px 6px 8px; } .pet-info .row { display: flex; justify-content: space-between; color: #e8dcc0; font-size: 14px; margin: 3px 0; } .pet-info .row b { color: #ffe08a; } .pet-cmds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; } .pet-cmds .menu-btn { justify-content: center; margin: 0; } .pet-cmds .menu-btn.on { box-shadow: inset 0 0 0 2px #d8b060; color: #ffe08a; } .menu-btn.danger { color: #ffb08a; justify-content: center; } /* 寵物選單(卡片) */ .pet-card { margin: 4px 2px; padding: 10px 12px 12px; border-radius: 6px; background: linear-gradient(#e9dcc0, #d9c9a6); border: 1px solid #b89c6c; box-shadow: 0 2px 4px rgba(0,0,0,.35); } .pet-card .pet-title { color: #5a3a1c; font-size: 16px; font-weight: 800; } .pet-card .pet-stat { color: #3f8a2c; font-size: 14px; font-weight: 700; margin: 4px 0 8px; } .pet-card .pet-cmds { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; } .pet-btn { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 0 2px; white-space: nowrap; font-size: 13px; font-weight: 800; color: #4a2a0c; background: linear-gradient(#ffe089, #e9a93a); border: 2px solid #9a6a1e; border-radius: 3px; box-shadow: inset 0 1px 0 #fff4c0; } .pet-btn.small { flex-grow: 1.45; font-size: 12px; } .pet-btn.on { color: #1d4a10; background: linear-gradient(#c8f59a, #6fbf3a); border-color: #3d7a1e; } .pet-card .pet-rename { display: flex; gap: 8px; margin-top: 10px; align-items: center; } .pet-card .pet-rename input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 3px; border: 1px solid #8f8a80; background: #a9a59c; color: #222; font-size: 14px; } .pet-card .pet-rename input::placeholder { color: #e8e4dc; } .pet-card .pet-rename .pet-btn { flex: 0 0 auto; padding: 0 12px; } /* 商店數量:點數字跳出數字鍵盤 */ .shop-card .qty b { cursor: pointer; } #numpad { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); } #numpad .np-box { width: min(88%, 340px); padding: 14px 12px 12px; border-radius: 6px; background: linear-gradient(#3e2f2a, #2c211d); border: 2px solid #7a4a2a; box-shadow: 0 0 0 1px #1a120e, 0 6px 18px rgba(0, 0, 0, .6); } #numpad .np-disp { width: 62%; margin: 0 auto 14px; padding: 8px; text-align: center; font-size: 20px; font-weight: 700; color: #e8e4dc; background: linear-gradient(#1f4652, #142e38); border: 1px solid #2f6a7a; border-radius: 3px; } #numpad .np-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } #numpad .np-key { min-height: 44px; font-size: 20px; color: #e8e0d8; background: linear-gradient(#5a4a46, #463834); border: 1px solid #6e5a54; border-radius: 3px; } #numpad .np-key:active { filter: brightness(1.3); } #numpad .np-foot { display: flex; gap: 10px; margin-top: 14px; } #numpad .np-foot button { flex: 1; min-height: 46px; font-size: 18px; font-weight: 700; color: #fff; border-radius: 3px; } #numpad .np-cancel { background: linear-gradient(#8a2a2a, #5e1a1a); border: 1px solid #b04040; } #numpad .np-ok { background: linear-gradient(#2a5ea0, #1a3c6e); border: 1px solid #4a8ad0; } /* 領出寵物:已領出的變暗 */ #dlg-body .menu-btn.done { opacity: .45; } /* 世界地圖(點小地圖打開) */ #worldmap { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; } #worldmap.hidden { display: none; } #worldmap .wm-ring { width: min(92vw, 440px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #c9a86a; box-shadow: 0 0 0 1px #3a2a16, 0 6px 22px rgba(0, 0, 0, .65); background: #d6bd8c; } #worldmap canvas { display: block; width: 100%; height: 100%; } #worldmap .wm-close { position: absolute; top: calc(50% - min(46vw, 220px) - 6px); right: calc(50% - min(46vw, 220px) - 4px); } /* buff 圖示:已過去的時間從上往下變淡、最後 10 秒閃爍(不顯示秒數) */ .buff { overflow: hidden; } .buff .fade { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: rgba(10, 8, 6, .62); pointer-events: none; } .buff.ending canvas { animation: buffBlink .6s steps(2, start) infinite; } @keyframes buffBlink { 50% { opacity: .25; } } .buff .fade { transition: height 1s linear; } /* 技能頁:頭盔技能右下角顯示減半後的 MP */ .skill.helm { position: relative; } .skill.helm .mp { position: absolute; right: 1px; bottom: 0; font-size: 10px; font-weight: 800; color: #9fd0ff; text-shadow: 0 0 2px #000, 0 0 2px #000; } /* 回城鈕:有指定村莊時下面小字顯示 */ #btn-home small { display: block; font-size: 10px; line-height: 1; margin-top: 2px; color: #ffe08a; font-weight: 700; } /* 物品視窗:裝備素質 */ .is-stats { margin: 6px 0 10px; padding: 8px 10px; border-radius: 4px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(201, 168, 106, .35); } .is-stats .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 1.7; color: #d8ccb0; } .is-stats .row b { color: #f2e2b8; font-weight: 700; text-align: right; } .is-stats .row.up b { color: #9fe07a; } /* 商店:裝備素質 */ .shop-card.has-stats canvas, .shop-card.has-stats .info { cursor: pointer; } .shop-card .stat-hint { font-style: normal; margin-left: 4px; font-size: 12px; color: #9fd0ff; } #stats-pop { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .4); } #stats-pop .sp-box { position: relative; width: min(90%, 340px); max-height: 90%; overflow: auto; padding: 12px; border-radius: 6px; background: linear-gradient(#3e2f2a, #2c211d); border: 2px solid #7a4a2a; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); } #stats-pop .x-btn { position: absolute; top: 6px; right: 6px; } #stats-pop .is-head { padding-right: 44px; } /* 確認視窗 */ .yn-text { font-size: 16px; color: #f0e2bc; margin: 10px 2px 14px; line-height: 1.5; } .yn-row, .trade-foot { display: flex; gap: 8px; } .yn-row button, .trade-foot button { flex: 1; min-height: 42px; font-weight: 700; } .yn-yes { color: #fff; background: linear-gradient(#2a5ea0, #1a3c6e) !important; border: 1px solid #4a8ad0 !important; } .yn-no { color: #fff; background: linear-gradient(#8a2a2a, #5e1a1a) !important; border: 1px solid #b04040 !important; } /* 交易 */ .trade-sec { margin-bottom: 10px; padding: 6px 8px; border: 1px solid rgba(201, 168, 106, .35); border-radius: 4px; background: rgba(0, 0, 0, .25); } .trade-sec h4 { margin: 0 0 6px; color: #f2c55c; font-size: 14px; } .trade-sec .empty { margin: 4px 0; color: #9a8c70; font-size: 13px; } .trade-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e8dcc0; padding: 3px 0; width: 100%; text-align: left; } .trade-pick { display: flex; flex-direction: column; gap: 4px; max-height: 45vh; overflow: auto; margin-bottom: 8px; } .trade-pick .trade-row { min-height: 38px; padding: 4px 8px; } /* 隊伍面板 */ #party-box { position: absolute; z-index: 3; top: calc(112px + var(--sat)); left: calc(6px + var(--sal)); width: 130px; display: flex; flex-direction: column; gap: 4px; padding: 5px 6px; border-radius: 4px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(201, 168, 106, .4); } #party-box.hidden { display: none; } #party-box .pm-name { font-size: 12px; color: #f0e2bc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px #000; } #party-box .pm.me .pm-name { color: #9fd0ff; } #party-box .pm-bar { height: 4px; background: #222; border-radius: 2px; overflow: hidden; margin-top: 1px; } #party-box .pm-bar i { display: block; height: 100%; } #party-box .pm-bar.hp i { background: #d23b2e; } #party-box .pm-bar.mp i { background: #3a6fd8; } #party-box .pm-leave { min-height: 26px; padding: 0 6px; font-size: 12px; margin-top: 2px; } .trade-foot button { white-space: nowrap; font-size: 14px; padding: 0 4px; } .trade-sec h4 { display: flex; justify-content: space-between; } /* 斷線重連提示 */ #reconnect { position: fixed; z-index: 50; top: calc(8px + var(--sat)); left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 6px; background: rgba(120, 30, 20, .92); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,.6); } #reconnect.hidden { display: none; } /* 快捷欄 5 格再小一點(回城鈕不變) */ #hotbar .slot:not(.home) { width: calc(var(--hot-h) * .86); height: calc(var(--hot-h) * .86); align-self: center; } #hotbar .slot:not(.home) canvas.icon:not(.fill) { width: 82% !important; height: 82% !important; } #itemsheet #is-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; } .sealed-tag { margin-left: 6px; padding: 1px 6px; border-radius: 3px; font-size: 12px; color: #ffe0a0; background: #6a3a14; border: 1px solid #b07a3a; } /* 長按回城:選村莊(一列一個,不換行) */ .home-pick { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; margin-bottom: 6px; padding: 0 14px; white-space: nowrap; font-size: 16px; text-align: left; } .home-pick small { color: #f2c55c; font-size: 12px; } .home-pick.on { border-color: #f2c55c; box-shadow: 0 0 6px rgba(242,197,92,.6); } /* ==== 掛機統計(右側,統計按鈕開關)==== */ #hunt-stats { position: absolute; top: calc(236px + var(--sat)); right: calc(8px + var(--sar)); width: 200px; z-index: 3; background: rgba(12, 10, 7, .82); border: 1px solid #6a5634; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); padding: 6px 8px 7px; color: #e8dcc0; font-size: 12px; line-height: 1.35; } #hunt-stats .hs-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } #hunt-stats .hs-head b { color: #f2c55c; font-size: 13px; } #hunt-stats .hs-state { flex: 1; color: #8a7c62; font-size: 11px; } #hunt-stats .hs-state.on { color: #8fd18a; } #hunt-stats .hs-head button { background: #2a2216; color: #e0c070; border: 1px solid #5a4a30; font-size: 11px; padding: 1px 6px; line-height: 16px; } #hunt-stats .hs-close { padding: 1px 5px; } #hunt-stats .hs-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 4px; align-items: baseline; } #hunt-stats .hs-row b { color: #b8a57c; font-weight: normal; } #hunt-stats .hs-row span { font-variant-numeric: tabular-nums; color: #fff4d6; } #hunt-stats .hs-row em { font-style: normal; color: #e0c070; font-variant-numeric: tabular-nums; } #hunt-stats .hs-items { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; color: #b8a57c; font-size: 11px; max-height: 64px; overflow-y: auto; } #hunt-stats .hs-items:empty { display: none; } #hunt-stats .hs-empty { color: #8a7c62; padding: 4px 0; } #btn-stats { font-size: 13px; } #btn-stats.on { color: #ffe08a; } /* 統計按鈕放第二排(AUTO / PVP 下面),不要擠到小地圖 */ #side-buttons { flex-wrap: wrap; justify-content: flex-end; width: calc(42px * 2 + 8px); } #hunt-stats { top: calc(262px + var(--sat)); } /* ==== 血盟面板 ==== */ .clan-create { display: flex; gap: 8px; margin-bottom: 10px; } .clan-create input, .clan-title input { flex: 1; min-width: 0; background: rgba(10, 10, 10, .7); color: #e8dcc0; border: 1px solid #5a4a30; padding: 6px 8px; font-size: 14px; } .clan-h { margin: 12px 0 6px; color: #e0c070; font-size: 14px; font-weight: normal; border-bottom: 1px solid #4a3e2a; padding-bottom: 3px; } .clan-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; } .clan-head b { font-size: 20px; color: #f2c55c; } .clan-head small { color: #b8a57c; } .clan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 8px; margin-bottom: 5px; background: rgba(0, 0, 0, .38); border: 1px solid #4a3e2a; } .clan-row.off { opacity: .6; } .clan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .clan-info b { color: #fff4d6; font-weight: normal; font-size: 15px; } .clan-info small { color: #b8a57c; font-size: 12px; } .clan-btn { background: #2a2216; color: #e0c070; border: 1px solid #5a4a30; font-size: 13px; padding: 4px 10px; min-height: 0; } .clan-btn.on { color: #ffe08a; border-color: #8a6a30; } .clan-btn.danger, .learn.danger { color: #ffb4a0; } .clan-title { flex-basis: 100%; display: flex; gap: 6px; } .clan-auto .set-mid { font-size: 13px; } /* 角色裝備格:強化值 */ .equip { position: relative; } .equip .enh { position: absolute; left: 2px; top: 1px; font-size: 11px; line-height: 1; color: #ffe08a; text-shadow: 0 0 2px #000, 0 1px 2px #000; pointer-events: none; } .equip.small .enh { font-size: 9px; left: 1px; top: 0; } /* 記憶座標(祝福的瞬間移動卷軸)*/ .menu-btn { position: relative; } .menu-btn .bm-del { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: normal; color: #ffb4a0; border: 1px solid #5a4a30; background: #2a2216; padding: 3px 8px; } .bm-add { display: flex; gap: 6px; margin-top: 10px; } .bm-add input { flex: 1; min-width: 0; background: rgba(10, 10, 10, .7); color: #e8dcc0; border: 1px solid #5a4a30; padding: 6px 8px; font-size: 14px; } /* 祝福的道具:圖示外圍金色光暈 */ canvas.icon.blessed { filter: drop-shadow(0 0 1.5px #ffd84a) drop-shadow(0 0 3px rgba(255, 196, 40, .85)); } /* 受詛咒的道具:圖示外圍暗紅色光暈 */ canvas.icon.cursed { filter: drop-shadow(0 0 1.5px #a01818) drop-shadow(0 0 3px rgba(120, 10, 10, .9)); } /* 快捷:選格子模式 */ .slot-pick.quick { min-width: 96px; font-size: 15px; } #hotbar.picking { z-index: 8; } #hotbar.picking .slot[data-slot] { animation: hb-pick 0.9s ease-in-out infinite; border-color: #f2c55c !important; } @keyframes hb-pick { 0%, 100% { box-shadow: 0 0 0 2px #f2c55c, 0 0 6px rgba(242, 197, 92, .5); } 50% { box-shadow: 0 0 0 2px #fff0b0, 0 0 14px rgba(255, 220, 120, .95); } } #hotbar-pick-hint { position: absolute; left: 50%; transform: translateX(-50%); z-index: 8; pointer-events: none; bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + var(--tabrow-h) + var(--form-h) + var(--log-h) + 26px + var(--dragon-h) + var(--hot-h)); background: rgba(12, 10, 7, .85); border: 1px solid #8a6a30; color: #ffe08a; font-size: 13px; padding: 4px 10px; white-space: nowrap; } /* 記憶座標 / 祝福的瞬間移動卷軸:畫面中間的長條視窗,清單約 8 筆高、超過可以捲 */ #dialog.tp { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 24px)); max-height: none; display: flex; flex-direction: column; border-radius: 12px; } #dialog.tp #dlg-body { max-height: calc(8 * 50px); overflow-y: auto; } #dialog.tp .menu-btn { min-height: 44px; margin-bottom: 6px; } #dialog.tp #dlg-foot .bm-add { flex: 1; margin-top: 0; } #dialog.tp #dlg-total, #dialog.tp #dlg-ok { display: none; } #dialog.tp .menu-btn { padding-right: 78px; } /* 右邊留給「刪除」,座標文字不被蓋住 */ #dialog.tp .menu-btn small { white-space: nowrap; } /* ==== 所有 NPC 對話框放在畫面中間(娜魯帕製作、寵物 / 召喚獸、商店、傳送…),清單長時最高到畫面 80%、裡面捲動 ==== */ #dialog { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 24px)); max-height: min(80dvh, 760px); display: flex; flex-direction: column; border-radius: 12px; } #dialog #dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } #dialog.shop { width: min(440px, calc(100vw - 24px)); } /* 原版對話頁(dialogs.json):藍字換頁、金字是動作(製作等) */ .npc-page { color: #e8dcc0; font-size: 14px; line-height: 1.6; margin-bottom: 8px; } .npc-line { margin: 0; } .npc-gap { margin: 0; height: 8px; } .npc-page a { text-decoration: underline; cursor: pointer; padding: 0 1px; } .npc-link { color: #9fd0ff; } .npc-act { color: #ffd76a; font-weight: 700; display: inline-block; margin: 4px 0; } .npc-sec { margin: 0; } .npc-dim { opacity: .5; } /* 製作清單:材料不夠的那段變暗(點了照樣提示差多少) */ /* 手機打字時:輸入列浮在鍵盤正上方(hud.js 依 visualViewport 設定 top) */ #chat-form.kb { z-index: 60; } /* ==== 頻道改成左邊直排(釋放底下一整列);聊天紀錄 4 行 ==== */ :root { --tabrow-h: 0px; --tabcol-w: 34px; --log-h: 72px; } #chat-tabs { left: calc(6px + var(--sal)); right: auto; width: var(--tabcol-w); bottom: calc(var(--sab) + var(--exp-h) + var(--nav-h) + 5px); height: calc(var(--form-h) + var(--log-h) + 4px); flex-direction: column; gap: 2px; } #chat-tabs button { flex: 1; width: 100%; height: auto; min-height: 0; padding: 0; font-size: 10.5px; line-height: 1; border-radius: 3px; letter-spacing: 0; } #chat-form, #chat-log { left: calc(6px + var(--tabcol-w) + 4px + var(--sal)); } #chat-log { line-height: 17px; } @media (orientation: landscape) and (max-height: 500px), (min-width: 900px) and (min-height: 600px) { #chat-tabs { width: var(--tabcol-w); } #chat-log, #chat-form { width: calc(min(52vw, 460px) - var(--tabcol-w) - 4px); } } /* ==== 登入 / 建角:早期版天堂(參考圖用 4x-UltraSharp 放大,login_old / create_old / sym_*)==== */ .screen.old { --w: min(100vw, 480px); left: 50%; top: 0; transform: translateX(-50%); width: var(--w); max-width: none; height: 100dvh; max-height: none; padding: 0; overflow-x: hidden; overflow-y: auto; background: #050403; border: 0; border-radius: 0; box-shadow: 0 0 0 100vmax #050403; color: #f0e2bf; font-family: "Noto Serif TC", "PMingLiU", "MingLiU", serif; } .old .art { position: absolute; left: 0; top: 0; width: 100%; background: 0 0 / 100% 100% no-repeat; } .old .opanel { position: absolute; left: 12px; right: 12px; padding: 12px 14px; border-radius: 6px; background: rgba(8, 5, 2, .82); box-shadow: 0 0 0 1px rgba(214, 170, 90, .55), 0 6px 24px rgba(0, 0, 0, .7); } .old .orow { display: flex; align-items: center; gap: .6em; margin: 0 0 .7em; } .old .orow label { flex: 0 0 auto; margin: 0; font-size: 15px; letter-spacing: .15em; color: #f3cf7a; text-shadow: 0 1px 2px #000; } .old .orow input { flex: 1; min-width: 0; height: 34px; margin: 0; padding: 0 8px; color: #fff3d6; font-size: 16px; background: rgba(0, 0, 0, .6); border: 1px solid #8a6a3a; border-radius: 3px; outline: none; } .old .orow input:focus { border-color: #f3cf7a; box-shadow: 0 0 6px rgba(243, 207, 122, .5); } .old .obtn { display: block; width: 100%; height: 40px; min-height: 0; margin-top: .3em; padding: 0; font: inherit; font-size: 18px; letter-spacing: .6em; color: #f3cf7a; background: linear-gradient(#3a2a14, #1b1209); border: 1px solid #c9a35a; border-radius: 4px; text-shadow: 0 1px 2px #000; box-shadow: inset 0 1px 0 rgba(255, 220, 150, .25); } .old .obtn:disabled { letter-spacing: .1em; font-size: 15px; color: #a8906a; } .old .msg { text-align: center; margin: 6px 0 0; min-height: 0; } .old .credits { margin: 8px 0 0; } /* 登入:左半(羊皮紙),帳號密碼放在紙卷下方 */ #screen-login .art { height: calc(var(--w) * 1540 / 980); background-image: url("assets/ui182/login_old.webp?v=tml5ye"); } #screen-login .art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(transparent, #050403); } #screen-login .scroll { position: absolute; left: 17%; width: 62%; top: calc(var(--w) * 1540 / 980 * .16); font-size: 15px; line-height: 1.9; font-weight: 700; color: #000; } #screen-login .scroll h2 { margin: 0 0 .5em; font-size: 22px; text-align: center; letter-spacing: .3em; color: #000; text-shadow: none; } #screen-login .scroll p { margin: 0 0 .7em; } #screen-login .opanel { top: calc(var(--w) * 1540 / 980 * .84); margin-bottom: 24px; } /* 建角:右半(火圈台座),符號沒選到是暗的 */ #newchar-form { z-index: 5; } #newchar-form .art { height: calc(var(--w) * 1660 / 1128); background-image: url("assets/ui182/create_old.webp?v=tml5ye"); } #newchar-form .sym { position: absolute; top: calc(var(--w) * 1660 / 1128 * var(--y)); width: 19%; min-height: 0; aspect-ratio: 1; padding: 0; transform: translate(-50%, -50%); background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; border: 0; border-radius: 0; box-shadow: none; filter: grayscale(.85) brightness(.38); transition: filter .2s; } #newchar-form .sym.on { filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 210, 120, .85)); } #newchar-form .sym span { position: absolute; left: 50%; top: 92%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; color: #d9c08a; text-shadow: 0 1px 2px #000; } #newchar-form .sym.on span { color: #ffe09a; } #newchar-form .fig { position: absolute; left: 47%; top: calc(var(--w) * 1660 / 1128 * .12); height: calc(var(--w) * 1660 / 1128 * .47); aspect-ratio: 160 / 270; transform: translateX(-50%); background: 0 0 / 6000% 100% no-repeat; animation: ncfig 6s steps(59) infinite; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse 48% 52% at 50% 55%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 48% 52% at 50% 55%, #000 55%, transparent 100%); } @keyframes ncfig { to { background-position-x: 100%; } } #newchar-form .opanel { top: calc(var(--w) * 1660 / 1128 * .685); padding: 10px 12px; margin-bottom: 24px; } #nc-stats { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 6px 14px; } #nc-stats .stat { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 15px; } #nc-stats .stat span { flex: none; letter-spacing: .1em; color: #f3cf7a; text-shadow: 0 1px 2px #000; } #nc-stats .ctl { display: flex; align-items: center; gap: 6px; } #nc-stats .ctl b { width: 22px; text-align: center; color: #fff3d6; } #nc-stats .ctl button { width: 24px; height: 24px; min-height: 0; padding: 0; font-size: 15px; line-height: 1; color: #f3cf7a; background: #1b1209; border: 1px solid #8a6a3a; border-radius: 3px; } #nc-left { margin: 8px 0; text-align: center; font-size: 14px; color: #f3cf7a; } #nc-left b { color: #fff3d6; font-size: 16px; } .old .obtns { display: flex; gap: 10px; margin-top: 4px; } .old .obtns .obtn { margin: 0; letter-spacing: .4em; } /* 選角卡片:能力值放到名稱下面(原本三欄並排,手機上名稱欄只剩約 4 個字寬,名稱被截成「妖艷…」) */ #char-list li { grid-template-columns: 96px 1fr; grid-template-rows: auto auto; align-items: start; row-gap: 8px; } #char-list li canvas.cfig { grid-column: 1; grid-row: 1 / span 2; align-self: center; } #char-list li .cinfo { grid-column: 2; grid-row: 1; align-self: end; gap: 4px; } #char-list li .cstats { grid-column: 2; grid-row: 2; align-self: start; justify-content: start; } #char-list .cinfo .hunting { white-space: nowrap; } /* 信箱(hud.js renderMail):右側按鈕的紅點、信件列 */ #btn-mail { position: relative; } #btn-mail .badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #d8352a; color: #fff; font-size: 11px; font-style: normal; line-height: 18px; text-align: center; box-shadow: 0 0 0 1px #2a1010; } .mail-row .mail-done { color: #9c8a64; font-size: 13px; } .mail-body { flex-basis: 100%; white-space: pre-wrap; color: #d8cbaa; font-size: 13px; line-height: 1.5; } .mail-items { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; } .mail-item { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; background: rgba(0, 0, 0, .35); border: 1px solid #4a3e2a; color: #fff4d6; font-size: 13px; } .mail-item canvas { flex: none; } .mail-item.gold { padding: 4px 8px; color: #f2c55c; } /* 圖示(assets/icons,game-icons.net CC BY 3.0):用 mask 上色,顏色跟著文字 */ .ico { display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .round { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .round small { font-size: 9px; line-height: 1; letter-spacing: 0; } .round .ico { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px #000); } /* PVP 開關:正義值旁邊的小圓鈕(#status 本身不接點擊,這顆要打開) */ #btn-pvp { pointer-events: auto; flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; margin: -4px 0 -4px -4px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(20, 16, 10, .75); border: 1px solid #8a7250; color: #b8a57c; } #btn-pvp .ico { width: 16px; height: 16px; } #btn-pvp.on { background: radial-gradient(circle at 35% 30%, #ff7a63, #8e1f15); border-color: #ffb3a3; color: #fff; box-shadow: 0 0 8px rgba(255, 90, 60, .9); } /* 圖示內嵌(gateway 沒有 .svg 的 MIME;原檔在 assets/icons,game-icons.net CC BY 3.0) */ .ico-auto { --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjUyLjMxNCAxOS45NTdjLTcyLjAzNi4zNjMtMTQyLjk5IDMzLjUzNC0xODkuMTggOTUuOTctNjkuODMgOTQuMzktNTkuMTI1IDIyMy4zMiAxOS44NSAzMDQuOTkzbC0zNy4yMzggNTAuMzMyIDE1MS4yMi0yMi42MTNMMTc0LjM1IDI5Ny40MmwtNDMuMTM3IDU4LjMwOGMtNDQuMDgtNTQuMzgyLTQ3LjcyMy0xMzMuNjQ2LTQuMTYtMTkyLjUzIDMwLjY3Ni00MS40NjYgNzcuODYzLTYzLjUwNCAxMjUuNzU4LTYzLjc1MyAxNi4zNDQtLjA4NSAzMi43NjYgMi4zODIgNDguNjQ1IDcuNDY3bC02Ljk2My00Ni41NWMtMjMuODU4LTQuODYtNDcuOTA4LTUuMDI2LTcxLjAxNy0uOTk3LTU5LjIzMiA3LjMyMi0xMTMuOTk0IDM5LjkxOC0xNDguMTU3IDkxLjIxNSAzNS42NS02NS44OSAxMDMuNzc0LTEwNS45MTggMTc2LjA0My0xMDcuNzQ0IDEuNjczLS4wNDIgMy4zNDctLjA2MyA1LjAyMy0uMDY1IDE0LjgtLjAxIDI5Ljc0OCAxLjU5NiA0NC41OTcgNC45MDVsNDguNjA4LTcuMjY4Yy0zMS4xNC0xMy45MDYtNjQuMzItMjAuNjItOTcuMjc0LTIwLjQ1M3ptMjEyLjkzIDIyLjA1NWwtMTUxLjIxNyAyMi42MSAyMi42MTQgMTUxLjIyIDQxLjEyNi01NS41ODhjNDIuMjA0IDU0LjI5IDQ1LjA5MiAxMzIuMDQ4IDIuMTg3IDE5MC4wNDMtNDAuMjIgNTQuMzY3LTEwOC44MiA3NS4zMi0xNzAuMTkgNTcuNTY2bDYuNTIyIDQzLjU5OGMyOC43MjYgNS41MzMgNTguMjM2IDQuNDE0IDg2LjIwMy0zLjA3IDM3LjQ0OC01Ljk1NyA3My4zNC0yMi4wNSAxMDMuMTYtNDcuNzI4LTQ5LjE5NiA1NC42NS0xMjIuNjE1IDc3LjUxNC0xOTEuNzQ0IDY0LjM0bC01NS44IDguMzQ0Yzk5LjAzIDQzLjcgMjE4LjQwMiAxNC43NyAyODUuNTEtNzUuOTM4IDY5LjEzLTkzLjQ0NSA1OS4zNC0yMjAuNzQzLTE3LjQ4My0zMDIuNTNsMzkuMTE0LTUyLjg2NnoiLz48L3N2Zz4="); } .ico-pvp { --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMTkuNzUgMTQuNDM4YzU5LjUzOCAxMTIuMjkgMTQyLjUxIDIwMi4zNSAyMzIuMjggMjkyLjcxOGwzLjYyNiAzLjc1LjA2My0uMDYyYzIxLjgyNyAyMS45MyA0NC4wNCA0My45MjMgNjYuNDA1IDY2LjI1LTE4Ljg1NiAxNC44MTMtMzguOTc0IDI4LjItNTkuOTM4IDQwLjMxMmwyOC41MzIgMjguNTMgNjguNzE3LTY4LjcxN2M0Mi4zMzcgMjcuNjM2IDc2LjI4NiA2My42NDYgMTA0LjA5NCAxMDUuODFsMjguMDY0LTI4LjA2Yy00Mi40Ny0yNy40OTMtNzkuNzQtNjAuMjA2LTEwNi4wMy0xMDMuODc2bDY4LjkzNi02OC45MzgtMjguNTMtMjguNTNjLTExLjExNSAyMS44NTMtMjQuNDEzIDQyLjAxNS0zOS40NyA2MC41OTMtNDMuODUyLTQzLjgtODYuNDYyLTg1Ljg0Mi0xMzAuMTI1LTEyNS40Ny0uMjI0LS4yMDMtLjQzMi0uNDIyLS42NTYtLjYyNUMxODMuNjI0IDEyMi43NSAxMDguNTE1IDYzLjkxIDE5Ljc1IDE0LjQzN3ptNDcxLjg3NSAwYy04My4wMzggNDYuMjgtMTU0LjEyMiAxMDAuNzgtMjIxLjk3IDE2MS4xNTZsMjIuODE0IDIxLjU2MiA1Ni44MS01Ni44MTIgMTMuMjIgMTMuMTg3LTU2LjQzOCA1Ni40NCAyNC41OTQgMjMuMTg2YzYxLjgwMi02Ni45MiAxMTcuNi0xMzYuOTIgMTYwLjk3LTIxOC43MnptLTMyOS41MyAxMjUuOTA2bDIwMC41NiAyMDAuNTNjLTQuMzYgNC40NDMtOC44NCA4Ljc5My0xMy40MDUgMTMuMDMyTDE0OC44NzUgMTUzLjUzbDEzLjIyLTEzLjE4NnptLTc2LjY5IDExMy4yOGwtMjguNSAyOC41MzIgNjguOTA3IDY4LjkwNmMtMjYuMjkgNDMuNjczLTYzLjUzIDc2LjQxNC0xMDYgMTAzLjkwN2wyOC4wNjMgMjguMDZjMjcuODA3LTQyLjE2NCA2MS43NTgtNzguMTc0IDEwNC4wOTQtMTA1LjgxbDY4LjcxOCA2OC43MTcgMjguNTMtMjguNTNjLTIwLjk2Mi0xMi4xMTMtNDEuMDgtMjUuNS01OS45MzctNDAuMzEzIDE3Ljg2NS0xNy44MyAzNS42MS0zNS40MzMgNTMuMTU3LTUyLjk3bC0yNC44NDMtMjUuNjU1LTU1LjQ3IDU1LjQ2N2MtNC41NjUtNC4yMzgtOS4wMTQtOC42Mi0xMy4zNzQtMTMuMDYybDU1Ljg0NC01NS44NDQtMjQuNTMtMjUuMzc0Yy0xOC4yOCAxNy44NTYtMzYuNjAyIDM2LjA2LTU1LjE1OCA1NC41OTQtMTUuMDY4LTE4LjU4Ny0yOC4zOC0zOC43NTgtMzkuNS02MC42MjV6Ii8+PC9zdmc+"); } .ico-stats { --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjMgMjN2NDY2aDQ2NnYtMThoLTQwLjg5M1YyNTZoLTQ4djIxNWgtMzEuNjc1VjE1OS4zM2gtNDhWNDcxaC0zMS4yMjdWMzIwLjI0MmgtNDhWNDcxSDIwNy4yVjgwLjQxOGgtNDhWNDcxSDEyOFYxOTJIODB2Mjc5SDQxVjIzSDIzeiIvPjwvc3ZnPgo="); } .ico-mail { --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMTgyLjc4IDgwLjEyNWMzLjM2NyAxOS40OTggMTAuNjA4IDUyLjY3IDE5LjEyNiA4NC44MTMgOC4xMjYgMzAuNjYzIDE3LjczIDYwLjEyMiAyNS4wNjMgNzUuMDYyIDU3Ljk2OC0uOTYyIDE0OC4yMTItMTYuNzA3IDI1Mi4zNDMtNDYuMzQ0LTkxLjc1Ni03MC4wMjMtMTg4LjQ4Ni05OS4zNzYtMjk2LjUzMi0xMTMuNTN6TTE2NC42NTcgODVjLTY1LjYyIDUxLjI0My0xMDYuNDMgMTIwLjEwNi0xMzguNSAxOTYuMjUgNTQuODY2LTM4LjUxIDExMS42NDQtNjAuNDIgMTY5LjMxMy03MC45MDYtMy45OTUtMTIuNjM2LTcuODgtMjYuNDg2LTExLjYyNi00MC42MjUtOC40MjUtMzEuNzktMTUuNTU0LTY0LjEyLTE5LjE4OC04NC43MnptMzIyLjI4MSAxMjUuOTA2Yy03NC4xMjMgMjEuMjE4LTE0MS40MyAzNS42OC0xOTYuMjUgNDIuODEzIDI0LjAxOCA1MS43OTQgMzYuNDQ4IDEwNi42ODggNDMuNjg4IDE2MC45MzYgNzAuNjM0LTU4Ljc2IDEyNS4zNi0xMTguNDk1IDE1Mi41NjMtMjAzLjc1ek0yMDEuNTMgMjI4LjI4Yy01Ni41NjMgOS45MTctMTExLjc4IDMwLjk0Ni0xNjUuNTYgNjguOTA3IDg5LjQ3OCA2MS4zOTYgMTg5LjkxIDk3LjAzNyAyNzkuODc0IDExOS44NDQtNy4zNjItNTUuMDU3LTIwLjEwNC0xMDkuOTk3LTQ0Ljc1LTE2MS4wMy0xOC4zOSAxLjg5Ny0zNS4xMzQgMi44NzUtNDkuOTM4IDIuODc1aC01LjM0NGwtMi43MTgtNC42MjVjLTMuODk4LTYuNjktNy43Ny0xNS41OTgtMTEuNTYzLTI1Ljk3eiIvPjwvc3ZnPg=="); } .ico-auction { --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMTI5Ljc1IDI0LjQ3TDIxLjYyNSAyMTEuNjU1bDU1Ljc4IDMyLjE4OEwxODUuNTMyIDU2LjY1NiAxMjkuNzUgMjQuNDd6bTU1Ljk3IDY5LjI1bC03NS42MjYgMTMwLjg3NEwzMjYuNDcgMzQ5LjQ3bDc1LjU5Mi0xMzAuODc2TDE4NS43MiA5My43MnptODMuNDY4LjY4NmwtMTEuMjIgMTkuNDM4IDg0Ljk3IDQ5LjAzIDExLjI1LTE5LjQ2OC04NS00OXpNNDM0LjI1IDIwMC4yMkwzMjYuMTU2IDM4Ny40MDVsNTUuNzggMzIuMTg4IDEwOC4wOTUtMTg3LjE4OC01NS43OC0zMi4xODd6bS0yNzAuNTMgNzYuOTA1bC0xMS4yODIgMTkuNTMgODQuOTY4IDQ5IDExLjI1LTE5LjUtODQuOTM3LTQ5LjAzem0tMy4wOTUgNDUuODQ0TDYxLjMxMiA0OTQuODFoNjcuMTU3bDgyLjI4LTE0Mi45NjgtNTAuMTI1LTI4Ljg3NXoiLz48L3N2Zz4="); } #btn-stats .ico, #btn-mail .ico { width: 26px; height: 26px; } #btn-auction .ico { width: 26px; height: 26px; } /* 拍賣行(hud.js renderAuction) */ .au-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #d8cbaa; font-size: 13px; } .au-sel { flex: 1; min-width: 0; background: rgba(10, 10, 10, .7); color: #e8dcc0; border: 1px solid #5a4a30; padding: 6px; font-size: 14px; } .au-num { width: 96px; background: rgba(10, 10, 10, .7); color: #e8dcc0; border: 1px solid #5a4a30; padding: 6px 8px; font-size: 14px; } .au-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .au-item canvas { flex: none; } .au-buy { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #d8cbaa; font-size: 13px; } .au-total { color: #f2c55c; margin-right: auto; } .au-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 8px 0; color: #d8cbaa; } .au-form { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: rgba(0, 0, 0, .38); border: 1px solid #4a3e2a; } .au-pick { flex: none; width: 100%; } .au-calc { margin: 0; color: #c8b890; font-size: 12px; } .au-ref { margin: 0; color: #f2c55c; font-size: 13px; } /* 右上圓鈕(AUTO / 統計 / 信箱 / 拍賣)縮小一點;有未讀信件時信箱鈕亮起來 */ #side-buttons { gap: 6px; width: calc(36px * 2 + 6px); } #side-buttons .round { width: 36px; height: 36px; } #side-buttons .round .ico { width: 17px; height: 17px; } #btn-stats .ico, #btn-mail .ico, #btn-auction .ico { width: 21px; height: 21px; } #side-buttons .round small { font-size: 8px; } #btn-mail .badge { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; top: -4px; right: -4px; } #btn-mail.has-mail:not(.on) { filter: none; color: #ffe08a; box-shadow: 0 0 10px rgba(255, 200, 90, .9); } /* 交易視窗:下方直接放背包(點道具放入)、金幣一列 */ .trade-bag { margin-bottom: 10px; padding: 6px 8px; border: 1px solid rgba(201, 168, 106, .35); border-radius: 4px; background: rgba(0, 0, 0, .25); } .trade-gold { display: flex; align-items: center; gap: 8px; color: #f2c55c; font-size: 14px; margin-bottom: 6px; } .trade-gold span { flex: 1; } .trade-gold button { min-height: 32px; padding: 0 12px; font-size: 13px; } .trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; max-height: 30vh; overflow-y: auto; } .trade-grid .empty { grid-column: 1 / -1; margin: 4px 0; color: #9a8c70; font-size: 13px; } .trade-cell { position: relative; width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: url("assets/ui182/slot.webp?v=tmiqhy") center / 100% 100%; border: 0; border-radius: 0; box-shadow: none; } .trade-cell .cnt { position: absolute; right: 2px; bottom: 1px; font-style: normal; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; } .trade-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .trade-sec .trade-cell { cursor: default; } .trade-sec { padding: 5px 6px; margin-bottom: 8px; } .trade-sec h4 { margin-bottom: 4px; font-size: 13px; } .trade-tabs { display: flex; gap: 4px; margin-bottom: 6px; } .trade-tab { flex: 1; min-height: 30px; padding: 0; font-size: 13px; background: rgba(0, 0, 0, .35); border: 1px solid #5a4a30; color: #b8a57c; } .trade-tab.on { color: #ffe08a; border-color: #c9a35a; background: rgba(120, 90, 40, .45); } .trade-cell.sel { outline: 2px solid #ffd36b; outline-offset: -2px; box-shadow: 0 0 8px rgba(255, 210, 110, .8); } .trade-pickrow { display: flex; align-items: center; gap: 8px; min-height: 38px; margin-top: 6px; color: #e8dcc0; font-size: 14px; } .trade-pickrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trade-pickrow .hint { margin: 0; color: #9a8c70; font-size: 13px; } .trade-pickrow button { min-height: 34px; padding: 0 16px; font-size: 14px; } .trade-grid { max-height: 24vh; } /* 按鈕統一用遊戲原版的銅邊長條(bar.webp,同設定頁 / 商店的按鈕):確定類金字、取消 / 拒絕類偏紅字;不再用藍 / 紅漸層 */ .yn-yes, .yn-no, #numpad .np-ok, #numpad .np-cancel, .trade-tab, .trade-pickrow button, .trade-gold button { background: none !important; border: 0 solid transparent !important; border-width: 5px 7px !important; border-radius: 0 !important; box-shadow: none !important; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch !important; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 3px #000; } .yn-yes, #numpad .np-ok, .trade-pickrow button, .trade-gold button { color: #ffe08a !important; filter: sepia(.35) brightness(1.15); } .yn-no, #numpad .np-cancel { color: #ffb4a0 !important; filter: sepia(.5) saturate(1.6) hue-rotate(-20deg) brightness(.95); } .yn-yes:disabled { filter: grayscale(.6) brightness(.8); } .trade-tab { color: #a89878 !important; filter: brightness(.75); } .trade-tab.on { color: #ffe08a !important; filter: sepia(.35) brightness(1.2); } /* 面板裡的動作鈕(信箱兌換、拍賣行搜尋 / 重新整理、血盟、建立等)也用銅邊長條 */ #panel button.learn, #panel button.clan-btn { background: none !important; border: 0 solid transparent !important; border-width: 5px 7px !important; border-radius: 0 !important; box-shadow: none !important; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch !important; color: #ffe08a; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 3px #000; filter: sepia(.35) brightness(1.15); } #panel button.clan-btn:not(.on) { color: #d8c08a; filter: brightness(.85); } #panel button.learn.danger, #panel button.clan-btn.danger { color: #ffb4a0; filter: sepia(.5) saturate(1.6) hue-rotate(-20deg) brightness(.95); } /* NPC 對話的選項(傳送目的地、買賣、製作、寵物指令…)也用遊戲的銅邊長條,不用預設的棕色漸層 */ #dialog .menu-btn { background: none; border: 0 solid transparent; border-width: 5px 7px; border-radius: 0; box-shadow: none; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch; color: #f0d890; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 3px #000; filter: sepia(.3) brightness(1.1); } #dialog .menu-btn small { color: #e8cf98; font-weight: 400; opacity: 1; } #dialog .menu-btn:active { filter: sepia(.3) brightness(1.4); } #dialog .menu-btn.danger { color: #ffb4a0; filter: sepia(.5) saturate(1.6) hue-rotate(-20deg) brightness(.95); } /* 連線中斷(重新連線失敗):擋住整個畫面 */ #conn-lost { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(0, 0, 0, .78); } #conn-lost .cl-box { width: min(86vw, 340px); padding: 18px 16px; text-align: center; color: #e8dcc0; background: rgba(20, 16, 10, .95); border: 0 solid transparent; border-width: 14px; border-image: url("assets/ui182/panel.webp?v=tmiqhy") 16 fill / 14px stretch; } #conn-lost b { display: block; margin-bottom: 8px; font-size: 18px; color: #ffe08a; } #conn-lost p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; } #conn-lost button { width: 100%; min-height: 42px; font-weight: 700; color: #ffe08a; background: none; border: 0 solid transparent; border-width: 5px 7px; border-radius: 0; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch; } /* Google 登入:登入畫面只有 Google 按鈕(素材下載完才顯示);下面的按鈕只當下載進度,下載完就藏起來 */ #g-signin { display: flex; justify-content: center; min-height: 44px; margin: 0 0 .7em; } body:not(.assets-ready) #g-signin { visibility: hidden; } /* 「進入遊戲」一直在 Google 按鈕下面(下載素材時顯示進度) */ .glogin .obtn { margin-top: 10px; } /* 登入框(Google):置中的框、標題兩側飾線;素材授權等連結濃縮成一行 */ #screen-login .opanel.glogin { top: calc(var(--w) * 1540 / 980 * .70); left: 9%; right: 9%; padding: 16px 18px 12px; text-align: center; border-radius: 10px; background: linear-gradient(rgba(34, 23, 10, .94), rgba(10, 6, 2, .94)); box-shadow: 0 0 0 1px rgba(214, 170, 90, .7), 0 0 0 4px rgba(10, 6, 2, .8), 0 0 0 5px rgba(214, 170, 90, .35), 0 10px 30px rgba(0, 0, 0, .8); } .glogin .gl-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #f3cf7a; font-size: 16px; letter-spacing: .4em; text-shadow: 0 1px 2px #000; } .glogin .gl-title::before, .glogin .gl-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(214, 170, 90, .8), transparent); } .glogin #g-signin { margin: 0 0 4px; } /* 頁面是深色配色時,Chrome 會把 Google 按鈕的 iframe 底色畫成白色方塊;改回淺色配色就是透明底 */ #g-signin iframe { color-scheme: light; } .glogin .gl-links { margin: 12px 0 0; font-size: 12px; } .glogin .gl-links i { margin: 0 .6em; font-style: normal; color: #8a6a3a; } #app-version { position: fixed; right: 10px; bottom: 6px; z-index: 50; font: 11px/1 "Noto Sans TC", sans-serif; color: rgba(240, 226, 191, .45); pointer-events: none; } body.in-game #app-version { display: none; } /* 選角:固定 3 格。空格 = 建立角色(光柱照在火焰上,原版選角的「New Character」) */ #char-list li.newslot { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 4px 10px; cursor: pointer; border: 1px dashed rgba(216, 180, 106, .35); background: rgba(0, 0, 0, .25); transition: border-color .2s, background .2s; } #char-list li.newslot:hover, #char-list li.newslot:focus-visible { border-color: rgba(243, 207, 122, .8); background: rgba(216, 180, 106, .08); } #char-list li.newslot .cinfo b { color: #f3cf7a; } #char-list li.newslot .cinfo span { color: var(--muted); font-size: 14px; } /* 空格的圖:劍插在岩石上(使用者提供的原版選角圖,4x-UltraSharp 放大)*/ .ns-art { position: relative; width: 96px; height: 132px; display: flex; justify-content: center; align-items: flex-end; } .ns-art { align-items: center; } .ns-art .ns-anim { width: 96px; height: 112px; background: url("assets/ui182/newchar_sword.webp?v=tmncui") center / contain no-repeat; } /* 選角畫面背景:天堂標誌 + 長劍(使用者提供,4x-UltraSharp 放大),鋪在下半部,往上淡出 */ #screen-chars::before { content: ""; position: fixed; inset: auto 0 0 0; height: 62vh; z-index: -1; pointer-events: none; background: url("assets/ui182/charsel_bg.webp?v=tmncs5") center bottom / cover no-repeat; opacity: .6; -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); } /* 登入畫面垂直置中:圖的高度跟寬度走,螢幕比圖高時(電腦版、長手機)上下平均留黑,不要全擠在上面 */ #screen-login { --top: max(0px, (100dvh - var(--w) * 1540 / 980) / 2); } #screen-login .art { top: var(--top); } #screen-login .scroll { top: calc(var(--top) + var(--w) * 1540 / 980 * .16); } #screen-login .opanel.glogin { top: calc(var(--top) + var(--w) * 1540 / 980 * .70); } /* 選過的 Google 帳號(取代 Google 按鈕):圓角深色條 + G 標誌 + 信箱 + 切換帳號 */ #g-current { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; height: 44px; margin: 0 auto 4px; padding: 0 5px 0 12px; border-radius: 22px; background: #131314; border: 1px solid #8e918f; color: #e3e3e3; font: 14px/1 "Noto Sans TC", Roboto, sans-serif; text-align: left; } #g-current.hidden { display: none; } #g-current .g-logo { flex: 0 0 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat; } #g-current .g-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-current .g-switch { flex: 0 0 auto; height: 32px; padding: 0 9px; border-radius: 16px; border: 1px solid #5f6368; background: transparent; color: #a8c7fa; font: 13px/1 "Noto Sans TC", Roboto, sans-serif; cursor: pointer; } #g-current .g-switch:hover { background: rgba(168, 199, 250, .1); } /* 背景有圖:角色格加深底色,字才看得清楚 */ #char-list li { background-color: rgba(10, 7, 4, .78); } #char-list li.sel { background-color: rgba(40, 30, 12, .85); } #char-list li.newslot { background-color: rgba(10, 7, 4, .82); } .ns-art .ns-anim { mix-blend-mode: screen; } /* 圖是黑底:用濾色融進格子 */ /* 登入 / 選角時地圖還沒載入,畫布只會畫出空的菱形格線:進遊戲前不顯示畫布 */ body:not(.in-game) canvas#world { visibility: hidden; } /* 選角畫面縮小一點:三格 + 登入 + 刪除角色要在手機一個畫面內(扣掉瀏覽器網址列、底部工具列) */ #screen-chars h2 { font-size: 24px; margin: 0 0 12px; } #char-list li, #char-list li.newslot { grid-template-columns: 76px 1fr auto; min-height: 108px; margin-bottom: 8px; padding: 2px 8px; } #char-list li.newslot { grid-template-columns: 76px 1fr; } #char-list canvas.cfig { width: 76px; height: 104px; } #char-list li canvas.cfig { grid-row: 1 / span 2; } .ns-art { width: 76px; height: 104px; } .ns-art .ns-anim { width: 76px; height: 92px; } #char-list .cinfo { gap: 4px; } #char-list .cinfo b { font-size: 19px; } #char-list .cinfo span { font-size: 14px; } #char-list .cstats { font-size: 13px; gap: 2px 12px; } #screen-chars .gold-btn { min-height: 46px; margin: 12px auto 10px; } /* 設定面板(自動喝水 / 自動戰鬥)每一列的間距縮小 */ .set-row { gap: 8px; padding: 6px 8px; margin-bottom: 5px; } .set-label { gap: 2px 8px; } .set-mid input[type=range] { margin: 3px 0 0; } /* 離線收益:改成跟設定面板同一套(石板底 + 銅框、銅邊長條標題、銅框 ✕、深色列) */ .or-frame { border-radius: 0; padding: 30px 12px 14px; background: url("assets/ui182/stone.webp?v=tmiqhy") repeat center / 696px 120px; background-clip: padding-box; border: 14px solid transparent; border-image: url("assets/ui182/panel.webp?v=tmiqhy") 16 / 14px round; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); } .or-title { top: -16px; padding: 4px 30px; border-radius: 0; font-size: 19px; letter-spacing: .3em; color: #f0d890; text-shadow: 0 1px 2px #000, 0 0 3px #000; background: none; border: 0 solid transparent; border-width: 5px 7px; box-shadow: none; border-image: url("assets/ui182/bar.webp?v=tmiqhy") 5 7 fill / 5px 7px stretch; } .or-close { position: absolute; top: -14px; right: -10px; } .or-sub { color: #a8987a; } .or-rows { gap: 5px; } .or-row { min-height: 36px; border-radius: 0; background: rgba(0, 0, 0, .38); border: 1px solid #4a3e2a; box-shadow: none; } .or-row b { color: #e8dcc0; font-size: 15px; font-weight: 700; } .or-row span { color: #ffe08a; font-size: 16px; } .or-row span.loss { color: #ff7a6a; } .or-items { padding: 8px; background: rgba(0, 0, 0, .3); border: 1px solid #4a3e2a; } .or-item { color: #e8dcc0; } /* 回城地點:跟設定面板一樣的深色列(原本是金色長條) */ .home-pick { min-height: 42px; margin-bottom: 5px; border-radius: 0; background: rgba(0, 0, 0, .38); border: 1px solid #4a3e2a; box-shadow: none; color: #e8dcc0; font-size: 16px; text-shadow: 0 1px 2px #000; } .home-pick:active { background: rgba(216, 180, 106, .12); } .home-pick.on { border-color: #c89a48; background: rgba(216, 180, 106, .12); box-shadow: inset 0 0 8px rgba(242, 197, 92, .25); color: #ffe08a; } .home-pick small { color: #e0c070; } #is-title { color: #f0d890; text-shadow: 0 1px 2px #000; letter-spacing: .15em; } /* 信箱移到底部導覽(AI 生成的同風格信封圖示 i_mail.webp);右上角圓鈕不再顯示 */ #btn-mail { display: none !important; } #bottom-nav button { position: relative; } #nav-mail .badge { position: absolute; top: 2px; left: calc(50% + 8px); right: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #d8352a; color: #fff; font: 700 10px/16px sans-serif; text-align: center; box-shadow: 0 0 0 1px #2a1408; } #nav-mail .badge.hidden { display: none; } /* 底部導覽圖示放大一點(底排高度 --nav-h 不變) */ #bottom-nav .ico182 { width: 34px; height: 37px; } #bottom-nav button { padding: 2px 0; } #nav-mail .badge { top: 1px; left: calc(50% + 10px); } .set-ico .set-img { width: 34px; height: 34px; display: block; } /* 圖片圖示(定點巡邏) */