/* Võ Lâm Idle — lớp giao diện màn dọc.
   Bật bằng class body.vli-portrait. Không đổi logic đánh hay file lưu. */

#vpModeBtn{
  position:fixed;z-index:5600;left:8px;top:50%;transform:translateY(-50%);
  min-width:34px;padding:10px 6px;border-radius:8px;
  border:1px solid #c6a15a;color:#f6e7c2;
  background:linear-gradient(#3c3422,#16130c);
  box-shadow:0 2px 8px #000a, inset 0 1px 0 #fff3;
  font:12px/1.15 Tahoma,Arial,sans-serif;letter-spacing:.2px;
  writing-mode:vertical-rl;text-orientation:mixed;cursor:pointer;
}
#vpModeBtn:active{transform:translateY(-50%) scale(.96)}
body.vli-portrait #vpModeBtn{display:none!important}

#vli-portrait{display:none}
body.vli-portrait #vli-portrait{display:none!important}

body.vli-portrait #vli-pc-v24,
body.vli-portrait #pc23-shell,
body.vli-portrait #pcMenu,
body.vli-portrait #u20menu,
body.vli-portrait #u20r,
body.vli-portrait #u20side{display:none!important}
body.vli-portrait #app{
  width:100vw!important;max-width:none!important;height:100dvh!important;
  min-height:100dvh!important;display:flex!important;flex-direction:column!important;
  transform:none!important;overflow:hidden!important;
}
body.vli-portrait #top{display:flex!important;flex:none!important}
body.vli-portrait #battle{
  position:relative!important;inset:auto!important;flex:0 0 46%!important;
  width:100%!important;height:auto!important;min-height:220px!important;
}
body.vli-portrait #panel{display:block!important;flex:1 1 auto!important;min-height:0!important;height:auto!important}
body.vli-portrait #tabs{display:grid!important;flex:none!important}
body.vli-portrait #hud{display:grid!important}
body.vli-portrait #toast{position:fixed!important;z-index:21000!important;left:50%!important;right:auto!important;bottom:auto!important;top:108px!important;transform:translateX(-50%)!important;max-width:78vw}
body.vli-portrait #vliTown{left:8px!important;right:auto!important;top:70px!important;bottom:auto!important;width:min(168px,44vw)!important;z-index:30!important}
body.vli-portrait #vli-tk-fab{top:70px!important;right:8px!important;bottom:auto!important;left:auto!important;z-index:21000!important;padding:6px 10px!important}
body.vp-tools-off .vp-zoom{display:none!important}
body.vli-portrait:not(.vp-tools-off) #vli-tk-fab,body.vli-portrait:not(.vp-tools-off) #vliTown{display:none!important}
body.vli-portrait.mob #app{
  transform:none!important;width:100vw!important;height:var(--app-h,100dvh)!important;
}
@media (max-width:899px){
  body.mob #app{
    transform:none!important;width:100vw!important;height:var(--app-h,100dvh)!important;
  }
}
body.vli-portrait #modal{
  position:fixed!important;inset:0!important;z-index:80000!important;pointer-events:auto!important;
}
body.vli-portrait #modal.hidden{display:none!important}
body.vli-portrait #modal .mbox{max-height:68dvh;overflow:auto}
body.vli-portrait #modal .btn{min-height:48px;font-size:16px}
#vliClaim{
  position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
  z-index:100000;height:56px;border-radius:10px;border:1px solid #d7b56a;
  background:linear-gradient(#4d7a3d,#24381f);color:#f6f1df;
  font:700 18px/56px Tahoma,Arial,sans-serif;box-shadow:0 4px 16px #000c;
}
body.vli-portrait:has(#modal:not(.hidden)) #vliTown{display:none!important}
body.vli-portrait-frame{
  background:#070b09!important;
}
body.vli-portrait-frame #app{
  width:min(460px,100vw,calc(100dvh * 9 / 16))!important;
  max-width:min(460px,100vw)!important;
  left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;
  box-shadow:0 0 0 1px #6d5a32, 0 0 48px #000!important;
  z-index:1400!important;
}
body.vli-portrait:not(.vli-portrait-frame) #app{
  width:100vw!important;max-width:none!important;
  left:0!important;right:0!important;transform:none!important;
}

.vp-top{
  position:absolute;left:0;right:0;top:0;z-index:8;
  padding:calc(6px + env(safe-area-inset-top,0px)) 8px 10px;
  display:flex;align-items:center;gap:8px;pointer-events:none;
  background:linear-gradient(#000e,#0008 70%,#0000);
}
.vp-lv{
  flex:none;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  border:3px solid #e6c56a;color:#ffe9a8;
  background:radial-gradient(circle at 40% 35%,#4a3b1c,#140f08);
  box-shadow:0 0 0 2px #3a2a12, 0 2px 6px #000;
  font:700 20px/1 Tahoma,Arial,sans-serif;text-shadow:0 1px 2px #000;
}
.vp-bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vp-name{
  display:flex;justify-content:space-between;gap:8px;
  color:#f3e6c4;font:12px/1.2 Tahoma,Arial,sans-serif;text-shadow:0 1px 2px #000;
}
.vp-name b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-name span{flex:none;color:#f0d48a}
.vp-bar{position:relative;height:12px;border-radius:6px;overflow:hidden;border:1px solid #1a140c;background:#120e0a;box-shadow:inset 0 0 0 1px #000}
.vp-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px}
.vp-bar.hp i{background:linear-gradient(#b6e36a,#3e8a22)}
.vp-bar.mp i{background:linear-gradient(#8ec0ff,#2458b0)}
.vp-bar.xp i{background:linear-gradient(#ffe08a,#b8862a)}
.vp-bar span{
  position:absolute;inset:0;text-align:center;color:#fff;
  font:10px/12px Tahoma,Arial,sans-serif;text-shadow:0 0 2px #000,0 1px 1px #000;
}

.vp-fold{
  position:absolute;z-index:9;pointer-events:auto;
  left:50%;top:64px;transform:translateX(-50%);
  height:22px;padding:0 14px;border-radius:11px;
  border:1px solid #c6a15a;color:#f4e4bc;
  background:rgba(12,10,8,.84);
  box-shadow:0 2px 6px #0008;
  font:11px/20px Tahoma,Arial,sans-serif;text-shadow:0 1px 1px #000;
  white-space:nowrap;cursor:pointer;
}
.vp-fold:active{filter:brightness(1.15)}
body.vp-tools-off .vp-col,
body.vp-tools-off .vp-quest,
body.vp-tools-off .vp-vtab{display:none!important}
.vp-col{
  position:absolute;top:92px;bottom:214px;z-index:5;
  display:flex;flex-direction:column;gap:6px;overflow:auto;
  scrollbar-width:none;pointer-events:none;
}
.vp-col::-webkit-scrollbar{display:none}
.vp-left{left:6px;align-items:flex-start}
.vp-right{right:6px;align-items:flex-end}
.vp-btn{
  pointer-events:auto;flex:none;min-width:78px;height:28px;padding:0 8px;
  border-radius:6px;border:1px solid #c6a15a;color:#f4e4bc;
  background:linear-gradient(#3a3324,#17140e);
  box-shadow:inset 0 1px 0 #ffffff2e, 0 2px 3px #0008;
  font:12px/26px Tahoma,Arial,sans-serif;text-shadow:0 1px 1px #000;cursor:pointer;
}
.vp-btn:active{transform:translateY(1px);filter:brightness(1.12)}
.vp-btn.on{border-color:#ffe08a;color:#fff6d2;background:linear-gradient(#6d5624,#2a210e)}

.vp-quest{
  position:absolute;left:96px;right:96px;top:90px;z-index:4;
  text-align:center;color:#f7f1e4;pointer-events:none;
  font:12px/1.35 Tahoma,Arial,sans-serif;
  text-shadow:0 1px 2px #000,0 0 4px #000;
}
.vp-vtab{
  position:absolute;left:84px;top:46%;z-index:5;pointer-events:auto;
  width:22px;height:96px;padding:0;cursor:pointer;
  writing-mode:vertical-rl;transform:rotate(180deg);
  border-radius:0 6px 6px 0;border:1px solid #c6a15a;border-left:0;
  color:#f4e4bc;background:linear-gradient(#3a3324,#17140e);
  font:12px/22px Tahoma,Arial,sans-serif;text-shadow:0 1px 1px #000;
}

.vp-col,.vp-fold,.vp-vtab,.vp-zoom{display:none!important}
.vp-joy{
  position:absolute;left:12px;bottom:calc(118px + env(safe-area-inset-bottom,0px));
  width:112px;height:112px;border-radius:50%;z-index:6;pointer-events:auto;touch-action:none;
  background:radial-gradient(circle at 50% 50%,#0000 46%,#e6c56a 47%,#e6c56a 54%,#0000 55%),
    radial-gradient(circle at 50% 45%,#3a3428cc,#0c0e0ccc);
  border:2px solid #e6c56a;box-shadow:inset 0 0 0 8px #0006, 0 2px 8px #000a;
}
.vp-dock{
  position:absolute;left:0;right:0;bottom:0;z-index:30;pointer-events:auto;
  height:calc(58px + env(safe-area-inset-bottom,0px));
  padding:0 2px env(safe-area-inset-bottom,0px);
  display:flex;align-items:stretch;
  background:linear-gradient(#2a2418,#12110e);
  border-top:1px solid #c6a15a;box-shadow:0 -6px 16px #000a;
}
.vp-dock button{
  flex:1;margin:6px 3px;border-radius:8px;cursor:pointer;
  border:1px solid #8a7040;color:#f6e7c2;
  background:linear-gradient(#3c3424,#1a160f);
  font:700 12px/1.15 Tahoma,Arial,sans-serif;
}
.vp-dock button:active{filter:brightness(1.2)}
.vp-knob{
  position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f8e7b8,#c49a45 42%,#7a5a22);
  box-shadow:0 2px 5px #000a, inset 0 1px 0 #fff8;
  pointer-events:none;
}
.vp-zoom{
  position:absolute;z-index:8;pointer-events:auto;
  left:126px;right:164px;
  bottom:calc(66px + env(safe-area-inset-bottom,0px));
  height:26px;display:flex;align-items:center;gap:4px;
  padding:0 7px;border-radius:13px;border:1px solid #c6a15a;
  background:rgba(12,10,8,.78);box-shadow:0 2px 6px #0008;
}
.vp-zoom span,.vp-zoom b{
  flex:none;color:#f4e4bc;font:11px/1 Tahoma,Arial,sans-serif;text-shadow:0 1px 1px #000;
}
.vp-zoom b{min-width:34px;text-align:center}
.vp-zoom input{
  flex:1;min-width:0;height:16px;margin:0;accent-color:#e6c56a;cursor:pointer;
}

body.vli-portrait #battle #pad{
  display:grid!important;visibility:visible!important;pointer-events:none!important;
  position:absolute!important;left:auto!important;top:auto!important;transform:none!important;
  right:8px!important;bottom:8px!important;
  width:148px!important;height:auto!important;max-height:none!important;z-index:6!important;
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;
  grid-template-columns:repeat(3,44px);grid-auto-rows:44px;gap:4px;
  justify-content:end;align-content:end;
}
body.vli-portrait #battle #pad .hb{display:contents!important}
body.vli-portrait #battle #pad .pbtn{
  position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  width:44px!important;height:44px!important;margin:0!important;transform:none!important;
  pointer-events:auto!important;display:block!important;visibility:visible!important;
}
body.vli-portrait #battle #bHp{grid-area:1 / 1}
body.vli-portrait #battle #bMp{grid-area:1 / 2}
body.vli-portrait #battle #bTp{grid-area:1 / 3}
body.vli-portrait #battle #pad .pbtn.sk[data-i="0"]{grid-area:2 / 1}
body.vli-portrait #battle #pad .pbtn.sk[data-i="1"]{grid-area:2 / 2}
body.vli-portrait #battle #pad .pbtn.sk[data-i="2"]{grid-area:2 / 3}
body.vli-portrait #battle #pad .pbtn.sk[data-i="3"]{grid-area:3 / 2}
body.vli-portrait #battle #bMain{
  grid-area:3 / 3;width:64px!important;height:64px!important;
  margin:-10px -8px 0 0!important;z-index:2;
  box-shadow:0 0 0 3px #e6c56a, 0 3px 8px #000c!important;
}

#vpSheet{
  position:absolute;left:0;right:0;bottom:0;z-index:60;pointer-events:auto;
  height:min(78%,680px);display:flex;flex-direction:column;
  background:linear-gradient(#243024,#121910);
  border:2px solid #b8964e;border-bottom:0;border-radius:16px 16px 0 0;
  box-shadow:0 -10px 28px #000c;
}
#vpSheet[hidden]{display:none!important}
.vp-sheet-head{
  flex:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 10px;
  border-bottom:1px solid #6d5a32;color:#f0ddb0;
  font:700 14px/40px Tahoma,Arial,sans-serif;
}
.vp-sheet-head b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-sheet-head button{
  pointer-events:auto;width:32px;height:28px;border-radius:6px;cursor:pointer;
  border:1px solid #c6a15a;color:#f4e4bc;background:#2a2418;font:13px Tahoma,sans-serif;
}
#vpSheetBody{flex:1;min-height:0;overflow:auto;padding:8px 10px 18px;-webkit-overflow-scrolling:touch}
#vpSheetBody > .tab{
  display:block!important;position:relative!important;visibility:visible!important;
  left:auto!important;top:auto!important;width:auto!important;height:auto!important;
  max-width:none!important;max-height:none!important;overflow:visible!important;
  transform:none!important;padding:0 0 12px!important;background:transparent!important;
}
#vpSheetBody > .tab.hidden{display:none!important}
.vp-install{color:#f4e4bc;font:14px/1.45 Tahoma,Arial,sans-serif}
.vp-install h4{margin:12px 0 4px;color:#e6c56a;font-size:14px}
.vp-install p{margin:0 0 8px}
.vp-url{padding:8px;border:1px solid #c6a15a;background:#0c120f;word-break:break-all;font-size:13px}
.vp-menu{display:grid;gap:8px}
.vp-menu button{
  text-align:left;padding:12px 14px;border-radius:8px;cursor:pointer;
  border:1px solid #c6a15a;color:#f4e4bc;
  background:linear-gradient(#3a3324,#17140e);
  font:14px Tahoma,Arial,sans-serif;
}

body.vli-portrait #modal .mbox{
  width:min(430px,calc(100vw - 18px));
  max-height:min(86dvh,760px);
}
body.vli-pc-ui-v24.vli-portrait #modal{z-index:6000!important}
body.vli-pc-ui-v24.vli-portrait #toast{z-index:6100!important;bottom:calc(24px + env(safe-area-inset-bottom,0px))}

@media (max-height:700px){
  .vp-col{top:84px;bottom:188px;gap:4px}
  .vp-quest{top:82px}
  .vp-btn{height:24px;min-width:72px;font-size:11px;line-height:22px}
  .vp-lv{width:46px;height:46px;font-size:17px}
  .vp-joy{width:96px;height:96px}
  .vp-zoom{left:110px;right:148px}
  .vp-knob{width:40px;height:40px;margin:-20px 0 0 -20px}
  .vp-vtab{left:76px;height:78px}
}
@media (max-width:360px){
  .vp-quest{left:78px;right:78px}
  body.vli-portrait #battle #pad{width:138px!important;grid-template-columns:repeat(3,40px);grid-auto-rows:40px}
  body.vli-portrait #battle #pad .pbtn{width:40px!important;height:40px!important}
  body.vli-portrait #battle #bMain{width:54px!important;height:54px!important}
}