/* ai168 mobile/tablet layer — only active when <html> has .ai-touch */
html.ai-touch,html.ai-touch body{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100%;height:100dvh}
html.ai-touch input,html.ai-touch textarea{-webkit-user-select:text;user-select:text;font-size:max(16px,1em)}
:root{--sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);--ui:1;--op:.85}
#aiRotate{display:none;position:fixed;inset:0;z-index:2147483600;background:#0b0e18;color:#f3e2b5;font:16px/1.5 system-ui,sans-serif;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;touch-action:none}
html.ai-touch.ai-portrait-block #aiRotate{display:flex}
#aiRotate .ph{width:70px;height:120px;border:4px solid #e8b84b;border-radius:14px;margin-bottom:22px;animation:aiRot 2.2s ease-in-out infinite}
@keyframes aiRot{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
#aiRotate h2{margin:0 0 8px;font-size:20px;color:#e8b84b}
#aiRotate p{margin:4px 0;opacity:.85;font-size:14px}
#aiRotate button{margin-top:18px;min-height:48px;padding:0 22px;border-radius:24px;border:1px solid #e8b84b;background:#2a2210;color:#ffe9b0;font-size:15px}
#aiHUD{display:none;position:fixed;inset:0;z-index:2147483000;pointer-events:none;font-family:system-ui,sans-serif;color:#fff}
html.ai-touch.ai-hud-on:not(.ai-portrait-block) #aiHUD{display:block}
#aiHUD .b{pointer-events:auto;position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(20,24,40,.55);color:#fff;opacity:var(--op);box-shadow:0 2px 6px rgba(0,0,0,.4);touch-action:none;-webkit-user-select:none;user-select:none;font-size:calc(18px*var(--ui));min-width:44px;min-height:44px;padding:0}
#aiHUD .b:active,#aiHUD .b.on{background:rgba(232,184,75,.55)}
#aiHUD .b small{font-size:calc(10px*var(--ui));position:absolute;bottom:2px;opacity:.8}
/* right-bottom action cluster */
#aiAtk{width:calc(78px*var(--ui));height:calc(78px*var(--ui));right:calc(16px + var(--sa-r));bottom:calc(max(20px,var(--sa-b)) + 8px);background:rgba(190,40,40,.65)!important;font-size:calc(30px*var(--ui))!important}
#aiHUD .sec{width:calc(47px*var(--ui));height:calc(47px*var(--ui))}
#aiPick{right:calc(16px + var(--sa-r) + 86px*var(--ui));bottom:calc(max(20px,var(--sa-b)) + 4px)}
#aiTgt{right:calc(16px + var(--sa-r) + 70px*var(--ui));bottom:calc(max(20px,var(--sa-b)) + 62px*var(--ui))}
#aiSit{right:calc(16px + var(--sa-r) + 12px*var(--ui));bottom:calc(max(20px,var(--sa-b)) + 92px*var(--ui))}
/* skill bar bottom-center */
#aiBar{pointer-events:auto;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(20px,var(--sa-b)) + 2px);display:flex;gap:calc(4px*var(--ui));align-items:center;padding:4px 6px;border-radius:12px;background:rgba(10,12,22,.45);opacity:var(--op)}
#aiBar .s{width:max(44px,calc(46px*var(--ui)));height:max(44px,calc(46px*var(--ui)));border-radius:8px;border:1px solid rgba(232,184,75,.5);background:rgba(30,30,50,.7);color:#ffe9b0;font-size:calc(13px*var(--ui));display:flex;align-items:center;justify-content:center;touch-action:none;padding:0}
#aiBar .s:active{background:rgba(232,184,75,.55)}
#aiBar .pg{width:30px;height:44px;border:0;background:none;color:#e8b84b;font-size:18px;padding:0}
#aiBar .pn{font-size:11px;color:#e8b84b;min-width:22px;text-align:center}
html.ai-kb #aiBar,html.ai-kb #aiAtk,html.ai-kb #aiHUD .sec{display:none!important}
/* top-right menu icons */
#aiTop{pointer-events:auto;position:absolute;top:calc(8px + var(--sa-t));right:calc(8px + var(--sa-r));display:flex;gap:6px;opacity:var(--op)}
#aiTop .b{position:relative;width:max(44px,calc(40px*var(--ui)));height:max(44px,calc(40px*var(--ui)));border-radius:10px;font-size:calc(17px*var(--ui))}
html.lc-phone-s #aiTop .opt{display:none}
/* left-bottom chat + joystick */
#aiChat{left:calc(12px + var(--sa-l));bottom:calc(max(20px,var(--sa-b)) + 4px);width:auto!important;padding:0 14px!important;border-radius:22px!important;height:44px;font-size:14px!important}
html.ai-joy #aiChat{bottom:auto;top:calc(8px + var(--sa-t) + 110px)}
#aiJoy{display:none;pointer-events:auto;position:absolute;left:calc(20px + var(--sa-l));bottom:calc(max(20px,var(--sa-b)) + 10px);width:calc(120px*var(--ui));height:calc(120px*var(--ui));border-radius:50%;background:rgba(200,200,220,.18);border:2px solid rgba(255,255,255,.3);touch-action:none;opacity:var(--op)}
html.ai-joy #aiJoy{display:block}
#aiJoy i{position:absolute;left:50%;top:50%;width:44%;height:44%;margin:-22% 0 0 -22%;border-radius:50%;background:radial-gradient(circle,#f2f2f6 60%,#b8bcc8);box-shadow:0 2px 6px rgba(0,0,0,.5)}
/* settings sheet */
#aiSet{display:none;pointer-events:auto;position:absolute;right:calc(8px + var(--sa-r));top:calc(60px + var(--sa-t));width:min(320px,80vw);max-height:calc(100% - 80px);overflow:auto;background:rgba(14,16,28,.95);border:1px solid #e8b84b;border-radius:12px;padding:10px 14px;font-size:14px;touch-action:pan-y}
#aiSet.open{display:block}
#aiSet h3{margin:4px 0 8px;color:#e8b84b;font-size:15px;display:flex;justify-content:space-between;align-items:center}
#aiSet h3 button{width:44px;height:44px;background:none;border:0;color:#fff;font-size:20px}
#aiSet label{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:10px}
#aiSet input[type=checkbox]{width:24px;height:24px}
#aiSet select,#aiSet input[type=range]{min-height:36px;max-width:150px}
#aiSet .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
#aiSet .row button{min-height:44px;flex:1;border-radius:8px;border:1px solid #555;background:#222a40;color:#fff}
/* ---- v2: fill screen ---- */
html.ai-touch,html.ai-touch body{margin:0;padding:0;width:100%;overflow:hidden;background:#000}
html.ai-touch body{position:fixed;inset:0;height:100%;height:100dvh}
html.ai-touch body>canvas{position:fixed!important;left:0!important;top:0!important}
#aiTop .gear{display:none}
html.ai-phlay #aiTop .gear{display:flex}
/* ---- v2: phone in-game layout of roBrowser windows (only while playing on phones) ---- */
html.ai-phlay{--rw:.75;--mm:.6}
html.ai-phlay #ShortCut,html.ai-phlay #ShortCuts{display:none!important}
html.ai-phlay #BasicInfoV4,html.ai-phlay #BasicInfoV5,html.ai-phlay #BasicInfoV3,html.ai-phlay #BasicInfo{transform:scale(var(--rw));transform-origin:0 0;top:calc(4px + var(--sa-t))!important;left:calc(4px + var(--sa-l))!important;right:auto!important;bottom:auto!important}
html.ai-phlay.ai-menu-open #BasicInfoV4,html.ai-phlay.ai-menu-open #BasicInfoV5{z-index:60!important}
html.ai-phlay #ChatBox{transform:scale(.7);transform-origin:0 0;top:calc(46px + var(--sa-t))!important;left:calc(4px + var(--sa-l))!important;right:auto!important;bottom:auto!important}
html.ai-phlay.ai-chat-off #ChatBox{display:none!important}
html.ai-phlay.ai-menu-open #ChatBox{visibility:hidden}
html.ai-phlay #MiniMapV2,html.ai-phlay #MiniMap{transform:scale(var(--mm));transform-origin:100% 0;top:calc(8px + var(--sa-t) + max(44px,calc(40px*var(--ui))) + 6px)!important;right:calc(8px + var(--sa-r))!important;left:auto!important;bottom:auto!important}
html.ai-phlay #CashShopIcon{transform:scale(.7);transform-origin:100% 0;top:calc(8px + var(--sa-t) + max(44px,calc(40px*var(--ui))) + 6px)!important;right:calc(16px + var(--sa-r) + 128px*var(--mm))!important;left:auto!important}
html.ai-phlay #QuestWindow{transform:scale(.6);transform-origin:100% 0;top:calc(8px + var(--sa-t) + max(44px,calc(40px*var(--ui))) + 100px)!important;right:calc(16px + var(--sa-r) + 128px*var(--mm))!important;left:auto!important;max-height:30vh;overflow:hidden}
html.ai-phlay #StatusIcons{transform:scale(.75);transform-origin:0 0;top:calc(60px + var(--sa-t))!important;left:calc(8px + var(--sa-l))!important;right:auto!important;z-index:50!important}
html.ai-phlay #aiChat,html.ai-phlay.ai-joy #aiChat{top:auto;bottom:auto;top:calc(46px + 77px + 6px + var(--sa-t));left:calc(6px + var(--sa-l));height:36px;min-height:36px;font-size:13px!important;padding:0 10px!important}
html.ai-phlay.ai-chat-off #aiChat{top:calc(46px + var(--sa-t))}
html.ai-phlay #aiBar .pg{width:24px}
html.ai-phlay #aiBar{padding:3px 4px;left:calc(50% - 20px)}
html.lc-phone-s.ai-phlay:not(.ai-joy) #aiBar{left:calc(8px + var(--sa-l));transform:none}
#aiHint{pointer-events:auto;position:absolute;left:50%;transform:translateX(-50%);top:calc(56px + var(--sa-t));max-width:min(520px,70vw);display:flex;gap:8px;align-items:center;background:rgba(14,16,28,.94);border:1px solid #e8b84b;border-radius:12px;padding:8px 10px;font-size:13px;color:#ffe9b0;z-index:5}
#aiHint button{min-height:40px;border-radius:8px;border:1px solid #e8b84b;background:#2a2210;color:#ffe9b0;padding:0 12px;font-size:13px}
#aiHint small{opacity:.75}
html.ai-phlay.ai-menu-open #aiChat{display:none!important}
html.ai-phlay.ai-joy #aiBar{left:calc(var(--sa-l) + 30px + 120px*var(--ui));transform:none}
/* v3: keep >=48px horizontal gap between joystick ring and skill bar on phones */
html.ai-phlay.ai-joy #aiBar{left:calc(var(--sa-l) + 20px + 120px*var(--ui) + 48px);transform:none}