/* 直式模式（測試，2026-10-14，portrait-mode.js）：手機直拿、網址 ?portrait=1 開啟後才套用。 */


/* ---- 登入／建角視窗：橫式的左右兩欄改成上下一欄 ---- */
html[data-portrait="true"] #welcome[open]{display:block!important;width:calc(100vw - 16px)!important;max-width:none!important;height:auto!important;max-height:calc(100dvh - 16px)!important;margin:8px auto!important;overflow-y:auto!important;grid-template-columns:none!important}
html[data-portrait="true"] #welcome .welcome-art{height:150px!important;min-height:0!important;width:auto!important;overflow:hidden;position:relative}
html[data-portrait="true"] #welcome .welcome-art img.native-opening{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
html[data-portrait="true"] #welcome :is(.character-login,.account-form,.character-select,#create-form){width:auto!important;height:auto!important;min-height:0!important;writing-mode:horizontal-tb!important}
html[data-portrait="true"] #welcome :is(.character-login,.account-form,.character-select,#create-form) *{writing-mode:horizontal-tb!important}
html[data-portrait="true"] #welcome #create-form{grid-template-columns:1fr!important}
html[data-portrait="true"] #welcome #character-slots{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:calc(50% - 6px)!important;gap:12px!important;overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin}
html[data-portrait="true"] #welcome #character-slots>*{scroll-snap-align:start;min-width:0}   /* 選角：一頁兩格，左右滑 */
html[data-portrait="true"] #welcome .native-login-board{grid-template-columns:1fr!important;width:100%!important;height:auto!important;margin:0!important;box-sizing:border-box;padding:16px 18px!important;gap:10px!important;background:linear-gradient(#1a1e14,#11140d)!important;border:1px solid #8b7752!important;border-radius:6px;box-shadow:inset 0 0 0 1px #00000080}   /* 直式：不用石框背景，直接一個框放帳號密碼 */
html[data-portrait="true"] #welcome .native-login-board::before{display:none!important}
html[data-portrait="true"] #welcome .login-field{grid-template-columns:56px minmax(0,1fr)!important;width:auto!important}
html[data-portrait="true"] #welcome .login-actions{grid-template-columns:1fr 1fr!important;width:auto!important}
html[data-portrait="true"] #welcome #create-appearance{grid-template-columns:120px 1fr!important}

/* ---- 其他對話視窗（面板、NPC）：全寬 ---- */
html[data-portrait="true"] dialog[open]:not(#welcome){width:calc(100vw - 12px)!important;max-width:none!important;max-height:calc(100dvh - 12px)!important;left:6px!important;right:auto!important;margin:auto 0!important}

/* ---- 聊天：圓形按鈕，點了從下方彈出 ---- */
html[data-portrait="true"] #chat-toggle.portrait-chat-button{position:fixed!important;right:12px!important;bottom:calc(300px + env(safe-area-inset-bottom,0px))!important;left:auto!important;top:auto!important;width:48px!important;height:48px!important;min-width:0!important;padding:0!important;border-radius:50%!important;z-index:60!important;display:grid!important;place-items:center;font-size:0!important;background:radial-gradient(circle at 35% 30%,#6a5a35,#2a2416)!important;border:2px solid #c8ac72!important;box-shadow:0 2px 8px #000a}
html[data-portrait="true"] #chat-toggle.portrait-chat-button::before{content:"💬";font-size:22px}
html[data-portrait="true"] #chat-toggle.portrait-chat-button[data-unread]:not([data-unread=""])::after{content:attr(data-unread);position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#c43c2c;color:#fff;font:700 11px/18px sans-serif;text-align:center;box-sizing:border-box}
html[data-portrait="true"] body.desktop-client.touch-client #chat-box.chat-box.collapsed{display:none!important}
html[data-portrait="true"] body.desktop-client.touch-client #chat-box.chat-box:not(.collapsed){position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100vw!important;max-width:none!important;height:46dvh!important;max-height:none!important;z-index:59!important;transform:none!important;translate:none!important;border-radius:14px 14px 0 0!important;box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0px)}
html[data-portrait="true"] #chat-box:not(.collapsed) #chat-messages{flex:1 1 auto;min-height:0;overflow-y:auto}

/* ---- 上方狀態列：頭像、名字等級、經驗、生命／魔力 ---- */
html[data-portrait="true"] .touch-client .player-card{left:8px!important;top:calc(6px + env(safe-area-inset-top,0px))!important;width:calc(100vw - 72px)!important;height:50px!important;right:auto!important;transform:none!important;background:linear-gradient(#141710e6,#0d0f0bd9);border:1px solid #6d5c3a;border-radius:8px;box-sizing:border-box}
html[data-portrait="true"] .touch-client .player-card .class-mark{left:4px!important;top:5px!important;width:38px!important;height:38px!important;transform:none!important}
html[data-portrait="true"] .touch-client .player-card .identity{left:48px!important;top:4px!important;width:120px!important;height:16px!important;font-size:12px!important;line-height:16px!important;transform:none!important;display:flex;gap:6px;white-space:nowrap;overflow:hidden}
html[data-portrait="true"] .touch-client .player-card .identity>*{font-size:12px!important;line-height:16px!important;height:auto!important}
html[data-portrait="true"] .touch-client .player-card .experience{left:48px!important;top:24px!important;width:110px!important;height:20px!important;transform:none!important;font-size:10px!important}
html[data-portrait="true"] .touch-client .player-card .experience>*{font-size:10px!important;line-height:12px!important}
html[data-portrait="true"] .touch-client .player-card .experience .xp-track{height:4px!important}
html[data-portrait="true"] .touch-client .player-card .meter{left:168px!important;width:calc(100% - 176px)!important;height:14px!important;transform:none!important}
html[data-portrait="true"] .touch-client .player-card .meter.hp{top:3px!important}
html[data-portrait="true"] .touch-client .player-card .meter.mp{top:18px!important}
html[data-portrait="true"] .touch-client .player-card .meter>*{height:100%!important;font-size:10px!important;line-height:14px!important}
/* 小地圖放到狀態列下方左側 */
html[data-portrait="true"] .touch-client .map-card{left:8px!important;top:calc(62px + env(safe-area-inset-top,0px))!important;width:92px!important;height:92px!important;transform:none!important}

/* ---- 下方操作：搖桿靠左、技能環靠右，不重疊 ---- */
html[data-portrait="true"] .touch-client #touch-joystick{left:14px!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;top:auto!important}
/* 技能環的按鈕超出外框（實際分佈 x 60～322）：整組右移 40px，左下留給搖桿 */
html[data-portrait="true"] .touch-client .action-group{translate:40px 0}
/* 開場動畫：直拿時整張標誌縮進畫面 */
html[data-portrait="true"] #opening :is(img,video,canvas){object-fit:contain!important}
html[data-portrait="true"] body.desktop-client.touch-client #chat-box.chat-box:not(.collapsed){display:flex!important;flex-direction:column!important}
html[data-portrait="true"] body.desktop-client.touch-client #chat-box.chat-box:not(.collapsed) #chat-messages{flex:1 1 auto!important;height:auto!important;max-height:none!important}
html[data-portrait="true"] body.desktop-client.touch-client #chat-box.chat-box:not(.collapsed) #chat-form{margin-top:auto!important}
html[data-portrait="true"] #welcome #account-caption::after{content:"左右滑動看其他人物";display:block;margin-top:2px;color:#b9a77a}   /* 換行，不讓整行太長被切 */

/* ---- 2026-10-14 使用者實機截圖後微調 ---- */
/* 第一排（生命、魔力藥水與兩個快捷格）右移，跟第二排右緣對齊 */
html[data-portrait="true"] .touch-client .action-group>.action:is([data-slot="2"],[data-slot="3"],[data-slot="10"],[data-slot="11"]){translate:40px 0}
/* 「配置」往右（靠近 1/2 翻頁鈕） */
html[data-portrait="true"] .touch-client #quick-edit{translate:40px 0}
/* 「切換目標」往右下 */
html[data-portrait="true"] .touch-client #touch-target-switch{translate:30px 25px}
/* 「簽到」往下，放在右側功能列左邊，不壓狀態列 */
html[data-portrait="true"] .touch-client #daily-check-in-button{top:calc(70px + env(safe-area-inset-top,0px))!important;bottom:auto!important;translate:16px 0}
/* 任務欄放到小地圖與座標下方，不擋地圖 */
html[data-portrait="true"] .touch-client #quest-tracker{top:calc(174px + env(safe-area-inset-top,0px))!important;left:8px!important;bottom:auto!important;right:auto!important;transform:none!important}
/* 聊天圓鈕：實機上原本的圖示沒顯示（只剩深色圓），改用文字圖示 */
html[data-portrait="true"] #chat-toggle.portrait-chat-button>*{display:none!important}
html[data-portrait="true"] #chat-toggle.portrait-chat-button::before{content:"💬"!important;font:22px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important}

/* ---- 功能視窗（任務紀錄、裝備、背包…）：直式時全寬，放在狀態列下方 ---- */
html[data-portrait="true"] .desktop-client.touch-client .client-windows{inset:calc(62px + env(safe-area-inset-top,0px)) 4px calc(10px + env(safe-area-inset-bottom,0px)) 4px!important}
html[data-portrait="true"] .desktop-client.touch-client .client-window{left:0!important;width:100%!important;max-width:100%!important;transform:none!important}
html[data-portrait="true"] .desktop-client.touch-client .client-window:not(#window-party) .window-body{overflow:auto!important;max-width:100%}
/* 任務紀錄：清單在上、內容在下 */
html[data-portrait="true"] .desktop-client.touch-client #window-quests .mobile-quest-journal{grid-template-columns:1fr!important;grid-template-rows:minmax(0,42%) minmax(0,1fr)!important}
html[data-portrait="true"] .desktop-client.touch-client #window-quests .mobile-quest-sidebar{min-height:0;overflow:auto}
/* NPC 對話（左立繪／右選項）也上下排 */
html[data-portrait="true"] .native-npc-layout{grid-template-columns:1fr!important}
/* 任務紀錄視窗是固定定位（貼在 0,0）：放到狀態列下方、撐滿高度，清單區才看得到多筆 */
html[data-portrait="true"] .desktop-client.touch-client #window-quests{position:fixed!important;top:calc(62px + env(safe-area-inset-top,0px))!important;left:4px!important;right:4px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;width:auto!important;height:auto!important;max-height:none!important;transform:none!important}
/* 裝備強化：單欄；格子自動排，空白提示佔整行（原本「背包沒有強化卷軸」被擠成一字一行） */
html[data-portrait="true"] .enchant-pro{grid-template-columns:1fr!important}
html[data-portrait="true"] .enchant-pro .ep-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))!important}
html[data-portrait="true"] .enchant-pro .ep-grid>:not(.ep-slot){grid-column:1/-1}
/* 玩家交易：交易板在上、交易背包貼底（原本兩個都頂在最上面疊在一起，交易背包蓋住交易格） */
html[data-portrait="true"] .desktop-client.touch-client #window-tradebag{top:auto!important;bottom:0!important}
html[data-portrait="true"] .desktop-client.touch-client #window-trade{max-height:calc(100% - 192px)!important;overflow:auto}
/* 交易板（原版圖面 273 寬）放大 1.2 倍填滿；待放入的數量列可換行，不擠成一字一行 */
html[data-portrait="true"] .desktop-client.touch-client #window-trade .native-exchange{zoom:1.2;margin-inline:auto}
html[data-portrait="true"] .desktop-client.touch-client #window-trade .ex-row.ex-pending{flex-wrap:wrap;height:auto!important;row-gap:2px}
/* 選角：橫式 5 欄會把角色排在中間（第 3 格），直式一頁兩格會看不到；有角色的格子排最前 */
html[data-portrait="true"] #welcome #character-slots>*{grid-column:auto!important;grid-row:auto!important;order:1!important}
html[data-portrait="true"] #welcome #character-slots>.character-slot:not(.empty){order:0!important}
/* 目標框（打怪時的怪物名稱與血量）：原本 top 40 壓在狀態列上，移到狀態列下方 */
html[data-portrait="true"] .touch-client #target-card{top:calc(60px + env(safe-area-inset-top,0px))!important}
/* 戰利品／經驗訊息：原本在左下壓住搖桿，移到操作區上方 */
/* 商店：商品板在上、說明／購買在下（native-shop.js fitShop 的直式分支算尺寸） */
html[data-portrait="true"] .touch-client #panel[data-native-panel="shop"][open]{top:calc(62px + env(safe-area-inset-top,0px))!important;bottom:auto!important;margin:0!important}
html[data-portrait="true"] .touch-client #panel[data-native-panel="shop"] .native-shop-layout{grid-template-columns:1fr!important;grid-template-rows:var(--merchant-height) minmax(0,1fr)!important;height:100%}
html[data-portrait="true"] .touch-client #panel[data-native-panel="shop"] .native-merchant-board{transform-origin:top center!important;justify-self:center}
html[data-portrait="true"] .touch-client #panel[data-native-panel="shop"] .merchant-detail{width:100%!important;min-height:0}
/* 組隊視窗也是固定貼在 0,0：移到狀態列下方、小地圖右邊，不蓋住狀態列與小地圖 */
html[data-portrait="true"] .desktop-client.touch-client #window-party{position:fixed!important;top:calc(62px + env(safe-area-inset-top,0px))!important;left:104px!important;right:auto!important;width:auto!important;max-width:calc(100vw - 168px)!important;transform:none!important}
/* 原生面板的關閉鈕：橫式依「商品板寬＋說明區」算位置，直式會算到螢幕外（使用者：沒有關閉視窗）。一般面板放右上角；商店放在「購買物品」標題列右上的圓鈕上（商品板 349 寬、置中縮放：寬＝--merchant-height×349/364） */
html[data-portrait="true"] body.desktop-client.touch-client #panel[open] .dialog-head #close-panel{position:absolute!important;left:auto!important;right:6px!important;top:6px!important;z-index:20!important;display:grid!important;place-items:center;width:30px!important;height:30px!important;min-height:30px!important;border-radius:50%!important;background:#2a2014e6!important;border:1px solid #c8ac72!important;color:#f0ddb2!important;font:700 17px/28px var(--font)!important;visibility:visible!important;opacity:1!important}
html[data-portrait="true"] body.desktop-client.touch-client #panel[open][data-native-panel="shop"] .dialog-head #close-panel{right:auto!important;left:calc(50vw - 6px + var(--merchant-height,364px) * .4794 - 34px)!important;top:calc(var(--merchant-height,364px) * .022 - 6px)!important}
/* 氣球表情：拉出聊天列，放在圓形聊天鈕正下方（2026-10-14） */
html[data-portrait="true"] #chat-emote-toggle.portrait-emote-button{position:fixed!important;right:16px!important;left:auto!important;top:auto!important;bottom:calc(254px + env(safe-area-inset-bottom,0px))!important;width:40px!important;height:40px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border-radius:50%!important;z-index:60!important;display:grid!important;place-items:center;background:radial-gradient(circle at 35% 30%,#6a5a35,#2a2416)!important;border:2px solid #c8ac72!important;box-shadow:0 2px 8px #000a}
html[data-portrait="true"] #chat-emote-toggle.portrait-emote-button[hidden]{display:none!important}
html[data-portrait="true"] #chat-emote-toggle.portrait-emote-button canvas{width:30px!important;height:30px!important}
/* 系統訊息（撿取／戰利品）：放在血條下方、小地圖右邊；平常一行，點一下展開三行（2026-10-14 使用者） */
html[data-portrait="true"] .touch-client #loot-log{left:122px!important;right:56px!important;width:auto!important;min-width:0!important;top:calc(100px + env(safe-area-inset-top,0px))!important;bottom:auto!important;transform:none!important;pointer-events:auto!important;cursor:pointer;padding:2px 8px!important}
html[data-portrait="true"] .touch-client #loot-log:not(.expanded) p:not(:last-child){display:none}
html[data-portrait="true"] .touch-client #loot-log:not(.expanded) p:last-child::after{content:" ▾";opacity:.6}
/* 狀態圖示：左邊直排（任務欄下方） */
/* 2026-10-15（使用者：狀態直排，一排 10 格不夠放第二排）：直排每欄 10 個，滿了往右開第二欄，最多兩欄。 */
html[data-portrait="true"] #buff-strip{left:8px!important;top:var(--portrait-buff-top,calc(174px + env(safe-area-inset-top,0px)))!important;display:grid!important;grid-auto-flow:column!important;grid-template-rows:repeat(10,auto)!important;grid-auto-columns:max-content!important;gap:3px!important;max-height:none!important;max-width:none!important;overflow:visible!important}
/* 頭像列：等級緊接名字靠左、職業圖示往下一點、SP（技能值）放進第三條（2026-10-14 使用者） */
html[data-portrait="true"] .touch-client .player-card .identity{justify-content:flex-start!important}
html[data-portrait="true"] .touch-client .player-card .identity>*{flex:none!important;width:auto!important;text-align:left!important;margin:0!important}
html[data-portrait="true"] .touch-client .player-card #class-mark{translate:0 9px}
html[data-portrait="true"] .touch-client .sp-readout{position:fixed!important;left:177px!important;top:calc(40px + env(safe-area-inset-top,0px))!important;right:auto!important;bottom:auto!important;width:calc(100vw - 72px - 178px)!important;height:14px!important;margin:0!important;padding:0!important;transform:none!important;z-index:21;display:block!important;background:none!important;border:0!important}
html[data-portrait="true"] .touch-client .sp-readout .meter.sp{position:relative!important;inset:auto!important;left:0!important;top:0!important;width:100%!important;height:14px!important;margin:0!important;transform:none!important}
html[data-portrait="true"] .touch-client .sp-readout .meter.sp>*{height:100%!important;font-size:10px!important;line-height:14px!important}
/* 生命／魔力／技能值：文字靠左，第一個字對齊（2026-10-14 使用者） */
html[data-portrait="true"] .touch-client :is(.player-card,.sp-readout) .meter>b{justify-content:flex-start!important;padding:0 0 0 8px!important;text-align:left!important}
/* 聊天鈕：原本功能列的 ::after 是組隊樣的雙人圖、::before 是圓框，會蓋住 💬；全部拿掉只留 💬（2026-10-14 使用者） */
html[data-portrait="true"] #chat-toggle.portrait-chat-button::before{position:static!important;inset:auto!important;width:auto!important;height:auto!important;background:none!important;border:0!important;box-shadow:none!important;transform:none!important}
html[data-portrait="true"] #chat-toggle.portrait-chat-button::after{background:none!important;content:none!important}
html[data-portrait="true"] #chat-toggle.portrait-chat-button[data-unread]:not([data-unread=""])::after{content:attr(data-unread)!important;background:#c43c2c!important;width:auto!important;height:18px!important;inset:-4px -4px auto auto!important;position:absolute!important;color:#fff!important;font:700 11px/18px sans-serif!important;border-radius:9px!important;padding:0 4px!important;min-width:18px!important;box-sizing:border-box!important;text-align:center!important}
/* 聊天、表情：接在右側功能列最後一顆下面（portrait-mode.js 量功能列底部，寫進 --portrait-chat-top） */
html[data-portrait="true"] #chat-toggle.portrait-chat-button{top:max(var(--portrait-chat-top,0px),calc(100% - 348px))!important;bottom:auto!important}
html[data-portrait="true"] #chat-emote-toggle.portrait-emote-button{top:calc(max(var(--portrait-chat-top,0px),calc(100% - 348px)) + 54px)!important;bottom:auto!important}
/* 生命／魔力／技能值：文字放在條的後面（靠右） */
html[data-portrait="true"] .touch-client :is(.player-card,.sp-readout) .meter>b{justify-content:flex-end!important;padding:0 6px 0 0!important;text-align:right!important}
/* 右下技能／藥水按鈕整組放大（2026-10-14 使用者：這些按鈕再放大點），以右下角為基準 */
html[data-portrait="true"] .touch-client .action-group{scale:1.12;transform-origin:100% 100%}
/* 螢幕較矮、表情鈕會碰到回城等按鈕時：改放在聊天鈕左邊（portrait-mode.js 判斷） */
html[data-portrait="true"][data-emote-side="left"] #chat-emote-toggle.portrait-emote-button{top:calc(max(var(--portrait-chat-top,0px),calc(100% - 348px)) + 4px)!important;right:68px!important}
/* 提示訊息（例如「再按一次回城鈕，返回城鎮。」）：直式放在畫面中間，不卡在下排按鈕 */
html[data-portrait="true"] body.desktop-client.touch-client #toast{position:fixed!important;top:42%!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;max-width:min(320px,80vw)!important;font-size:13px!important;padding:6px 12px!important;text-align:center;z-index:70!important}
/* 右上圓球左邊的箭頭裝飾會蓋到生命值：直式裁掉左半段裝飾（2026-10-14 使用者：這箭頭修掉） */
html[data-portrait="true"] #rail-toggle::before{clip-path:inset(0 0 37px 34px)!important;-webkit-clip-path:inset(0 0 37px 34px)!important}
/* 💬 在 iPhone 看不到：原本功能列按鈕把文字設成透明（color／-webkit-text-fill-color），Safari 連表情符號一起隱藏 */
html[data-portrait="true"] #chat-toggle.portrait-chat-button::before{color:#fff!important;-webkit-text-fill-color:currentColor!important;opacity:1!important}
/* 聊天鈕：再往下一點，大小跟氣球表情鈕一樣（40px）（2026-10-14 使用者） */
html[data-portrait="true"] #chat-toggle.portrait-chat-button{width:40px!important;height:40px!important;right:16px!important;top:calc(max(var(--portrait-chat-top,0px),calc(100% - 348px)) + 8px)!important}
html[data-portrait="true"] #chat-toggle.portrait-chat-button::before{font-size:20px!important}
html[data-portrait="true"] #chat-emote-toggle.portrait-emote-button{top:calc(max(var(--portrait-chat-top,0px),calc(100% - 348px)) + 54px)!important}
html[data-portrait="true"][data-emote-side="left"] #chat-emote-toggle.portrait-emote-button{top:calc(max(var(--portrait-chat-top,0px),calc(100% - 348px)) + 8px)!important;right:64px!important}
/* 切換目標：左右雙箭頭圖示（desktop-ui.js 的 SVG） */
.touch-target-switch .target-switch-icon{display:block;margin:0 auto;filter:drop-shadow(0 1px 1px #000)}
/* 切換目標圈圈放大（2026-10-14 使用者：圈圈可以大一點），以中心放大不碰到旁邊按鈕 */
html[data-portrait="true"] .touch-client #touch-target-switch{scale:1.3;transform-origin:50% 50%}
/* 普通攻擊：雙劍交叉 SVG */
.attack-swords-icon{display:block;margin:0 auto;filter:drop-shadow(0 1px 2px #000c)}
/* 血條放大：原生血條圖照固定小尺寸畫，直式只看到細細一條；改成撐滿整格（2026-10-14 使用者） */
html[data-portrait="true"] .touch-client .player-card .meter{--native-meter-width:calc(100vw - 248px);--native-meter-height:14px}
html[data-portrait="true"] .touch-client .sp-readout .meter{--native-meter-width:calc(100vw - 250px);--native-meter-height:14px}
html[data-portrait="true"] .touch-client :is(.player-card,.sp-readout) .meter>span{background-size:var(--native-meter-width) 100%!important;border-radius:2px}
/* 文字：第一個字對齊（靠左），不對齊後面 */
html[data-portrait="true"] .touch-client :is(.player-card,.sp-readout) .meter>b{justify-content:flex-start!important;padding:0 0 0 6px!important;text-align:left!important}
/* 2026-10-14 使用者：左上壓縮的移除、職業圈大一點帥一點、移動上面一點、聊天圖示置中、攻擊圖示上面一點置中 */
html[data-portrait="true"] .touch-client .player-card::before{display:none!important}
html[data-portrait="true"] .touch-client .player-card #class-mark{translate:none!important;left:4px!important;top:4px!important;width:40px!important;height:40px!important;min-width:0!important;min-height:0!important;padding:0!important;display:grid!important;place-items:center;border-radius:50%!important;border:2px solid #e2c27a!important;background:radial-gradient(circle at 35% 28%,#9cc4e4 0,#3f6f99 38%,#16263a 78%)!important;box-shadow:0 0 0 2px #2a1f10,0 0 10px #e2c27a66,inset 0 -3px 6px #0008,inset 0 2px 3px #fff5!important;font:700 19px/1 "Asgard Title","Microsoft JhengHei",serif!important;color:#fff3cf!important;text-shadow:0 1px 2px #000,0 0 6px #e2c27a99!important}
html[data-portrait="true"] .touch-client #touch-joystick{bottom:calc(40px + env(safe-area-inset-bottom,0px))!important}
html[data-portrait="true"] #chat-toggle.portrait-chat-button::before{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;line-height:1!important;margin:0!important;padding:0!important}
html[data-portrait="true"] .touch-client .actionbar [data-slot="0"] .action-icon:has(.attack-swords-icon){position:absolute!important;left:50%!important;top:10px!important;width:36px!important;height:36px!important;transform:translateX(-50%)!important;margin:0!important;padding:0!important}
html[data-portrait="true"] .touch-client .actionbar [data-slot="0"] .attack-swords-icon{width:36px;height:36px}
/* 攻擊雙劍：直接以按鈕為基準置中（略偏上，留出下方「普通攻擊」字），大小固定 34px；不靠 :has()，舊版 iOS 也一樣 */
html[data-portrait="true"] .touch-client .actionbar [data-slot="0"] .action-icon{position:static!important;transform:none!important}
html[data-portrait="true"] .touch-client .actionbar [data-slot="0"] .attack-swords-icon{position:absolute!important;left:50%!important;top:50%!important;width:34px!important;height:34px!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%)!important;margin:0!important}
/* 手機橫式（2026-10-14 使用者：橫式聊天窗右移、任務視窗去經驗值下面） */
html:not([data-portrait="true"]) body.desktop-client.touch-client #chat-box{transform:translateX(-50%)!important}
html:not([data-portrait="true"]) body.desktop-client.touch-client #quest-tracker{left:var(--ls-quest-left,160px)!important;top:var(--ls-quest-top,46px)!important}
/* 強化視窗：裝備與卷軸格置中排列（2026-10-14 使用者：物品排放請置中） */
html[data-portrait="true"] .enchant-pro .ep-grid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:6px}
html[data-portrait="true"] .enchant-pro .ep-grid>.ep-slot{flex:0 0 calc((100% - 36px) / 7);max-width:56px;aspect-ratio:1}
html[data-portrait="true"] .enchant-pro .ep-grid>:not(.ep-slot){flex:1 0 100%}
/* 快捷格設定：技能說明（點一下技能顯示，固定在上方；2026-10-14） */
.slot-pick-detail{position:sticky;top:0;z-index:3;margin:0 0 10px;padding:8px 10px;border:1px solid #c8ac72;border-radius:6px;background:#17140d;box-shadow:0 4px 10px #000a;color:#efe0bc;font:13px/1.55 var(--font)}
.slot-pick-detail .spd-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.slot-pick-detail .spd-head b{font-size:15px;color:#f6dc9a}
.slot-pick-detail p{margin:0 0 4px}
.slot-pick-detail .spd-meta{color:#c9b88f;font-size:12px}
.slot-pick-detail [data-confirm-pick]{width:100%;margin-top:4px;padding:6px;border:1px solid #c8ac72;border-radius:4px;background:#3a2f18;color:#ffe9b0;font:600 13px var(--font)}
.slot-pick.armed{outline:2px solid #f2c75c;outline-offset:-2px}
/* 放入快捷格：每格顯示目前內容 */
[data-bind-slot]{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
[data-bind-slot] small{font-size:11px;color:#c9b88f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 直式：右側功能列容器很長，透明處蓋住技能換頁鈕等（2026-10-14 使用者：換頁還是無法按）；容器可點穿，只有按鈕可按 */
html[data-portrait="true"] .function-rail{pointer-events:none!important}
html[data-portrait="true"] .function-rail>*{pointer-events:auto!important}
/* 技能資訊：類型與效果 */
.skill-type{margin:2px 0 4px;color:#f2d488;font-weight:700}
.skill-effect{color:#bfe3a6}
/* 直式目標框（2026-10-14 使用者：直式的沒有血條資訊框）：原本被地圖畫布蓋住、又和系統訊息／簽到重疊。
   放在小地圖右邊、簽到鈕左邊，層級在地圖之上；系統訊息往下移到它下面。 */
html[data-portrait="true"] .touch-client #target-card{top:calc(60px + env(safe-area-inset-top,0px))!important;left:122px!important;right:auto!important;width:min(160px,calc(100vw - 270px))!important;transform:none!important;z-index:30!important;--target-meter-width:calc(min(160px,calc(100vw - 270px)) - 16px)!important;box-sizing:border-box}
html[data-portrait="true"] .touch-client #target-card #target-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-portrait="true"] .touch-client #loot-log{top:calc(112px + env(safe-area-inset-top,0px))!important}
/* 鑑定（2026-10-14 使用者：鑑定用放大鏡是不是沒佈局完）：原本只有半截浮在中間、後面背包露出來；改成跟強化一樣佔滿視窗區 */
html[data-portrait="true"] body.desktop-client.touch-client #panel[open]:has(.identify-panel){position:fixed!important;inset:calc(62px + env(safe-area-inset-top,0px)) 4px calc(10px + env(safe-area-inset-bottom,0px)) 4px!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;margin:0!important;transform:none!important;overflow:auto}
html[data-portrait="true"] .identify-panel .ep-grid>.ep-slot{max-width:64px}
html[data-portrait="true"] .identify-panel .ep-go{margin-top:12px;min-height:44px}
/* 血條閃爍（2026-10-14 使用者：耗血時血條都會閃爍）：條本身 width 0.25s 動畫、外框 transition:all，
   扣血／回血／每 0.4 秒更新一直打斷重來會一閃一閃；拿掉動畫，直接顯示目前數值（直式、橫式、電腦都適用）。 */
:is(.player-card,.sp-readout) .meter,:is(#hp-bar,#mp-bar,#sp-bar,#xp-bar){transition:none!important;animation:none!important}
/* 2026-10-15（使用者：不同手機會卡住聊天跟氣球表情）：聊天、表情鈕改到左側搖桿正上方（那一塊空著），
   不再跟右下回城鈕、快捷格、頁碼搶位置。搖桿 146px、離底 40px。 */
html[data-portrait="true"] #chat-toggle.portrait-chat-button,html[data-portrait="true"][data-emote-side="left"] #chat-toggle.portrait-chat-button{left:14px!important;right:auto!important;top:auto!important;bottom:auto!important;top:calc(var(--joy-top,calc(100% - 186px)) - 58px)!important}
html[data-portrait="true"] #chat-emote-toggle.portrait-emote-button,html[data-portrait="true"][data-emote-side="left"] #chat-emote-toggle.portrait-emote-button{left:18px!important;right:auto!important;top:auto!important;bottom:auto!important;top:calc(var(--joy-top,calc(100% - 186px)) - 108px)!important}

/* 2026-10-17（使用者：中間那一個框）：商品說明框放大後，底部購買區仍有完整高度，不沿用上方商品板的高度裁切。 */
html[data-portrait="true"] .touch-client #panel[data-native-panel="shop"] .merchant-detail{height:var(--merchant-detail-height,var(--merchant-height))!important;max-height:var(--merchant-detail-height,var(--merchant-height))!important}