/* Touch uses the same actors, inventory and shortcut actions as the native HUD. */
.desktop-client.touch-client { --touch-slot:52px; --touch-gap:6px; --touch-bottom:124px; }
.desktop-client.touch-client .actionbar { left:auto; right:max(12px,env(safe-area-inset-right)); bottom:12px; width:calc(var(--touch-slot)*5 + var(--touch-gap)*4); height:112px; max-width:none; transform:none; background:none; border:0; pointer-events:none; }
.desktop-client.touch-client .action-group { left:0; right:0; top:0; bottom:auto; display:grid; grid-template-columns:repeat(5,var(--touch-slot)); grid-template-rows:repeat(2,var(--touch-slot)); gap:var(--touch-gap); pointer-events:auto; }
.desktop-client.touch-client .actionbar button.action { width:var(--touch-slot); height:var(--touch-slot); min-width:0; flex:none; padding:3px 2px 15px; background:linear-gradient(#4e4631ec,#181d15eb); border:2px ridge #b29863; border-radius:7px; box-shadow:0 2px 5px #0007; touch-action:manipulation; }
.desktop-client.touch-client .actionbar button.action b { display:block; position:absolute; left:2px; right:2px; top:auto; bottom:3px; padding:0; background:none; border:0; color:#f1e5c3; font-size:9px; text-align:center; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.desktop-client.touch-client .actionbar .action kbd { display:none; }
.desktop-client.touch-client .actionbar .action small { top:2px; bottom:auto; right:3px; font-size:10px; }
.desktop-client.touch-client .actionbar .action-icon { font-size:25px; line-height:28px; }
.desktop-client.touch-client .actionbar .action.bound-icon canvas { width:26px; height:26px; }
.desktop-client.touch-client .actionbar .hud-orb { display:none; }
.desktop-client.touch-client .actionbar .experience { position:fixed; left:50%; right:auto; top:31px; bottom:auto; width:200px; transform:translateX(-50%); }
.desktop-client.touch-client .actionbar .bottom-nav { position:fixed; left:max(12px,env(safe-area-inset-left)); bottom:6px; display:flex; width:auto; gap:10px; align-items:center; }
.desktop-client.touch-client .actionbar #coordinates { position:fixed; left:auto; right:12px; bottom:2px; width:auto; min-width:92px; border:0; background:none; }
.desktop-client.touch-client .touch-pad { position:fixed; display:grid; left:max(14px,env(safe-area-inset-left)); bottom:28px; width:134px; height:134px; grid-template-columns:repeat(3,42px); grid-template-rows:repeat(3,42px); gap:4px; z-index:14; opacity:.93; }
.desktop-client.touch-client .touch-pad button,.desktop-client.touch-client .touch-pad span { width:42px; height:42px; font-size:22px; border:2px ridge #a58b5a; border-radius:7px; background:#222d1ee6; color:#f1dfad; touch-action:none; }
.desktop-client.touch-client .touch-pad button[data-dir=up] { grid-area:1/2; }
.desktop-client.touch-client .touch-pad button[data-dir=left] { grid-area:2/1; }
.desktop-client.touch-client .touch-pad span { grid-area:2/2; }
.desktop-client.touch-client .touch-pad button[data-dir=right] { grid-area:2/3; }
.desktop-client.touch-client .touch-pad button[data-dir=down] { grid-area:3/2; }
.desktop-client.touch-client .function-rail { top:52px; bottom:138px; right:8px; padding-top:0; width:46px; gap:5px; background:#11190fd9!important; border:1px solid #8d7850; border-radius:5px; overflow-y:auto; overscroll-behavior:contain; }
.desktop-client.touch-client .function-rail > button { flex:0 0 42px; width:42px; height:42px; }
.desktop-client.touch-client .rail-orb,.desktop-client.touch-client .quest-tracker,.desktop-client.touch-client .system-box { display:none; }
.desktop-client.touch-client .chat-box { display:none; }
.desktop-client.touch-client .chat-box.mobile-open { display:block; left:160px; right:70px; bottom:var(--touch-bottom); width:auto; max-width:500px; }
.desktop-client.touch-client .chat-box .chat-messages { height:60px; }
.desktop-client.touch-client .chat-box input { min-height:36px; font-size:16px; }
.desktop-client.touch-client .chat-tabs button,.desktop-client.touch-client .chat-box form button { min-height:34px; font-size:12px; }
.desktop-client.touch-client .client-windows { inset:48px 64px var(--touch-bottom) 12px; }
.desktop-client.touch-client .client-window { left:50%!important; top:0!important; width:620px; max-width:100%; min-width:0; max-height:100%; transform:translateX(-50%)!important; transform-origin:top center; }
.desktop-client.touch-client .window-header { min-height:42px; }
.desktop-client.touch-client .window-header h2 { font-size:14px; }
.desktop-client.touch-client .window-header button { width:38px; height:36px; font-size:22px; }
.desktop-client.touch-client .window-body { padding:12px; font-size:14px; }
.desktop-client.touch-client .window-body button { min-height:40px; font-size:13px; }
.desktop-client.touch-client .window-body select,.desktop-client.touch-client .window-body input { min-height:38px; font-size:16px; }
.desktop-client.touch-client .window-body .settings-row { flex-wrap:wrap; gap:8px; }
.desktop-client.touch-client .native-board .gear-slot,.desktop-client.touch-client .native-bag .inventory-cell { min-height:0; }
.desktop-client.touch-client #window-character { width:340px; }
.desktop-client.touch-client .scene-bottom { left:160px; right:315px; bottom:14px; max-width:none; }
.desktop-client.touch-client .scene-label { display:none; }
.desktop-client.touch-client #toast { bottom:var(--touch-bottom); font-size:13px; width:auto; }
.desktop-client.touch-client #panel { width:640px; max-width:calc(100vw - 36px); max-height:calc(100dvh - 24px); }
.desktop-client.touch-client #panel button { min-height:40px; font-size:13px; }
.desktop-client.touch-client #panel input,.desktop-client.touch-client #panel select { min-height:38px; font-size:16px; }
@media(max-height:350px) {
 .desktop-client.touch-client { --touch-slot:44px; --touch-gap:4px; --touch-bottom:110px; }
 .desktop-client.touch-client .touch-pad { transform:scale(.85); transform-origin:left bottom; }
 .desktop-client.touch-client .function-rail { top:44px; bottom:118px; }
 .desktop-client.touch-client .client-windows { top:36px; }
}

.touch-joystick { display:none; }
.desktop-client.touch-client .touch-pad { display:none; }
.desktop-client.touch-client .touch-joystick { display:block; position:fixed; left:max(18px,env(safe-area-inset-left)); bottom:25px; width:146px; height:146px; z-index:14; border-radius:50%; border:2px solid #b59a64b5; background:radial-gradient(circle,#3443359c 0 33%,#19281c70 34% 62%,#85774a70 63% 65%,#15201975 66%); box-shadow:inset 0 0 15px #070d0cb8,0 2px 12px #0004; touch-action:none; user-select:none; -webkit-user-select:none; }
.desktop-client.touch-client .joystick-stick { position:absolute; left:50%; top:50%; width:54px; height:54px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 28%,#8f8964,#464b32 58%,#17281c); border:2px ridge #d3b57c; box-shadow:0 3px 9px #0009; pointer-events:none; }
.desktop-client.touch-client .joystick-arrows { position:absolute; inset:0; display:grid; place-items:center; font-size:134px; line-height:1; color:#d7c28a4a; pointer-events:none; }
.desktop-client.touch-client .touch-joystick small { position:absolute; bottom:9px; left:0; right:0; text-align:center; color:#f0dfb0; font-size:11px; pointer-events:none; }
.desktop-client.touch-client .touch-joystick.active { border-color:#edd6a0; background-color:#4b63402b; }
.desktop-client.touch-client .touch-joystick.active .joystick-stick { border-color:#ffdfa2; }
@media(max-height:350px) { .desktop-client.touch-client .touch-joystick { width:124px; height:124px; bottom:22px; } }

/* A geometric guide shares the exact 50% origin with the knob. A font glyph
   has asymmetric bearings and can make an aligned control look off-center. */
.desktop-client.touch-client .joystick-arrows{font-size:0;display:block;border-radius:50%;background:linear-gradient(90deg,transparent calc(50% - .5px),#d7c28a33 calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#d7c28a33 calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px));mask-image:radial-gradient(circle,#000 0 64%,transparent 65%)}
.desktop-client.touch-client .joystick-arrows::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border:1px solid #d7c28a55;border-radius:50%}
.desktop-client.touch-client .joystick-stick{will-change:transform}
/* Give the thumb a small circular margin without shifting the visible wheel
   or its logical center. A near-edge touch should not reach the map below. */
.desktop-client.touch-client .touch-joystick::after{content:"";position:absolute;inset:-10px;border-radius:50%;background:transparent;touch-action:none}
/* Short notices (任務交通建議): a small, opaque frame instead of the 640px panel. */
body.desktop-client #panel[data-compact]{width:420px!important;max-width:calc(100vw - 36px)!important;background:#1f241d!important;background-clip:padding-box!important;font-size:13px}
body.desktop-client #panel[data-compact] #panel-body{padding:6px 10px 8px}
body.desktop-client #panel[data-compact] #panel-body p{margin:4px 0 8px;line-height:1.5}
/* 每日簽到 and 阿巴坦's 時裝兌換 (costume-ui.js): the native panels' warm wood and gold, not a flat grey box. */
body.desktop-client #panel[data-compact]{background:#241c12!important;background-clip:padding-box!important;color:#ead9b0}
.daily-check-in>p{margin:4px 0 8px;line-height:1.5;color:#e4d2a8}
.daily-check-in strong{color:#f3d27a}
.daily-check-in .check-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:6px 0;padding:0;list-style:none}
.daily-check-in .check-day{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:4px 1px;border:1px solid #6b5636;border-radius:3px;background:linear-gradient(#3a2d1c,#2a2014);color:#e8d5a8;font-size:11px;line-height:1.3}
.daily-check-in .check-day b{font-weight:600;white-space:nowrap;font-size:11px}
.daily-check-in .check-day span{display:flex;flex-direction:column;align-items:center;gap:0;white-space:nowrap;font-size:11px}
.daily-check-in .check-day canvas,.daily-check-in .check-day img{width:24px!important;height:24px!important;max-width:24px}
.daily-check-in .check-day small{font-size:10px;color:#cdb98a}
.daily-check-in .check-day.got{opacity:.5}
.daily-check-in .check-day.next{border-color:#e2c46f;box-shadow:0 0 0 1px #e2c46f inset,0 0 6px #e2c46f55}
.costume-shop .costume-row span{flex:1;min-width:0;display:flex;flex-direction:column}.costume-shop .costume-row small{opacity:.75}
.daily-check-in .check-day em{font-style:normal}
/* The round rail icons are wider than the rail's clip box: move the rail in so their right edge shows whole. */
body.desktop-client .function-rail{right:6px!important}
/* Plain panels (任務交通建議, 每日簽到 …): the close button sits inside the frame, not on its edge. */
body.desktop-client #panel:not([data-native-panel]) .dialog-head #close-panel{right:12px!important;top:6px!important}
/* 技能資訊 buttons have no leading icon: centre the text instead of keeping the icon gap. */
.desktop-client .single-native-window .native-skill-popover button:not([data-detail-close]){padding-left:8px!important;padding-right:8px!important;text-align:center!important;justify-content:center}

/* 2026-11-06（使用者：全系統窗口檢查，不要一下大一下小；可以全修）：手機橫式實測（915×412）功能視窗原本 任務 640×382、地圖 560×345、
   玩家買賣板 620×352、介面設定 560×345；統一成和強化／鑑定／一般視窗相同的 640 寬、上下各留 12px（約 388 高），置中。
   11/06 實測補：時裝衣櫥 560×345、怪物圖鑑 460×292（偏右）一併改標準。原版美術視窗（角色、背包、技能、稱號）維持原比例；NPC 對話／商店是兩欄大視窗另計；小確認框（data-compact）420。 */
html:not([data-portrait="true"]) body.touch-client :is(#window-quests,#window-world,#window-market,#window-settings,#window-wardrobe,#album-window){position:fixed!important;top:12px!important;bottom:12px!important;left:0!important;right:0!important;margin:0 auto!important;width:min(640px,calc(100vw - 36px))!important;max-width:none!important;height:auto!important;max-height:none!important;transform:none!important;box-sizing:border-box}