#vliTown{
  position:fixed;z-index:90;left:12px;bottom:70px;width:min(340px,72vw);
  pointer-events:none;font:12px/1.35 Tahoma,Arial,sans-serif;
}
#vliTownBar{
  pointer-events:auto;display:block;width:100%;text-align:left;
  height:24px;padding:0 10px;border-radius:12px;cursor:pointer;
  border:1px solid #c6a15a;color:#f4e4bc;background:rgba(12,10,8,.84);
  box-shadow:0 2px 6px #0008;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#vliTownPanel{
  display:none;pointer-events:auto;margin-top:4px;max-height:200px;
  overflow:auto;padding:6px;border-radius:8px;border:1px solid #c6a15a;
  background:rgba(8,10,8,.94);color:#f4e4bc;
}
#vliTown.open #vliTownPanel{display:block}
#vliTownDoing{margin-bottom:6px;color:#d8ccb4}
#vliTownDoing b{display:block;color:#ffd78a;margin-bottom:2px}
#vliTownLines{display:flex;flex-direction:column;gap:3px;max-height:140px;overflow:auto}
#vliTownLines div{word-break:break-word}
#vliTownLines b{color:#ffd78a}
#vliTownLines small{color:#b7a888}
#vliTownForm{display:flex;gap:4px;margin-top:6px}
#vliTownTxt{
  flex:1;min-width:0;height:28px;border-radius:6px;border:1px solid #8a7040;
  background:#14110c;color:#f4e4bc;padding:0 8px;font:12px Tahoma,Arial,sans-serif;
}
#vliTownForm button{
  height:28px;padding:0 10px;border-radius:6px;border:1px solid #c6a15a;
  background:#3a3324;color:#f4e4bc;cursor:pointer;
}
#vliRank{
  position:fixed;z-index:120;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);pointer-events:auto;
}
.vli-rank-card{
  width:min(560px,94vw);max-height:min(78vh,640px);overflow:auto;
  padding:14px 16px 12px;border:12px solid transparent;
  border-image:url(../ui/jx/frame.png) 9 19 fill stretch;
  color:#efe6cc;font:13px/1.35 Tahoma,Arial,sans-serif;background:#070a09;
}
.vli-rank-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.vli-rank-head b{color:#ffe9a0;font-size:15px}
.vli-rank-head button{
  height:26px;padding:0 10px;border:1px solid #8ea596;border-radius:2px;
  background:linear-gradient(#24332c,#101814);color:#d1fbe6;cursor:pointer;
}
.rankwin .rktabs{display:flex;gap:4px;margin:0 0 8px;padding:0 2px;border-bottom:1px solid #3c4a43}
.rankwin .rktabs button{
  margin-bottom:-1px;padding:5px 14px;border:1px solid #2c3832;border-bottom-color:#3c4a43;
  border-radius:3px 3px 0 0;background:#0a0f0d;color:#8fa79a;font:600 12.5px Tahoma,Arial,sans-serif;cursor:pointer;
}
.rankwin .rktabs button.on{background:linear-gradient(#24332c,#101814);border-color:#8ea596;border-bottom-color:#101814;color:#ffe9a0}
.rankwin .rklist{margin:0 0 8px;border:1px solid #000;box-shadow:inset 0 0 0 1px #2c3832;background:#070a09}
.rankwin .rkrow{
  display:grid;grid-template-columns:30px 30px 1fr auto;align-items:center;gap:8px;
  padding:4px 10px 4px 8px;border-bottom:1px solid #18201c;border-left:3px solid transparent;background:transparent;
}
.rankwin .rkrow:nth-child(even){background:#0c110f}
.rankwin .rkrow:last-child{border-bottom:0}
.rankwin .rkrow.top1{border-left-color:#ffd24a;background:linear-gradient(90deg,#3a2c0c,#16130a 45%,transparent)}
.rankwin .rkrow.top2{border-left-color:#cfd8de;background:linear-gradient(90deg,#283036,#121618 45%,transparent)}
.rankwin .rkrow.top3{border-left-color:#d08a52;background:linear-gradient(90deg,#33200f,#15100a 45%,transparent)}
.rankwin .rkrow.me{box-shadow:inset 0 0 0 1px #7cff7d}
.rankwin .rkpos{font:700 14px Arial,sans-serif;color:#7d8f85;text-align:center}
.rankwin .rkrow.top1 .rkpos,.rankwin .rkrow.top2 .rkpos,.rankwin .rkrow.top3 .rkpos{font-size:19px}
.rankwin .rkface{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:#1a1408;font:700 13px Tahoma,Arial,sans-serif;border:1px solid #000;box-shadow:0 1px 2px #000;
}
.rankwin .rkname{display:flex;flex-direction:column;min-width:0}
.rankwin .rkname b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;color:#efe6cc}
.rankwin .rkrow.top1 .rkname b{color:#ffd86a}
.rankwin .rkrow.top2 .rkname b{color:#e6eef2}
.rankwin .rkrow.top3 .rkname b{color:#f0b07a}
.rankwin .rkname small{font-size:11px;color:#7d8f85}
.rankwin .rklv{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap}
.rankwin .rklv b{min-width:62px;text-align:right;font:700 13px Arial,sans-serif;color:#e8e0c8}
.rankwin .rklv b.tw{color:#7fd0ff}
.rankwin .rklv small{font-size:11px;color:#7d8f85}
.rankwin .rklv em.cs{
  padding:1px 6px;border:1px solid #6a3a7a;border-radius:2px;background:#22102a;
  color:#f0a8ff;font:600 10.5px/1.4 Arial,sans-serif;font-style:normal;
}
.rankwin .rkme{margin:0;color:#efe6cc;font-size:12px}
.rankwin .rknote,.rankwin .rkempty{margin:4px 0 0;color:#7d8f85;font-size:11px}
@media (max-width:420px){
  .rankwin .rktabs button{padding:5px 8px}
  .rankwin .rkrow{grid-template-columns:24px 26px 1fr auto;gap:6px;padding:4px 6px}
  .rankwin .rkface{width:26px;height:26px}
  .rankwin .rklv{flex-direction:column;align-items:flex-end;gap:2px}
  .rankwin .rklv b{min-width:0}
}
body.vli-portrait #vliTown{
  left:8px;right:8px;top:auto;bottom:calc(112px + env(safe-area-inset-bottom,0px));width:auto;
}
@media (max-height:700px){
  body.vli-portrait #vliTown{left:8px;right:8px;top:auto;bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}
body.vp-tools-off #vliTown{left:16px;right:16px}
body:has(#csel) #vliTown{display:none!important}
body:has(#csel) #csel{z-index:200!important}