/* Native SPRs retain their aspect ratio; no emoji or repainted item artwork. */
.original-spr-icon{display:block;width:30px;height:30px;object-fit:contain;image-rendering:pixelated;pointer-events:none}
#vli-tdp{width:40px!important;height:40px!important;box-sizing:border-box;border:1px solid #a38b56!important;border-radius:6px!important;background:linear-gradient(#273029dd,#111a15e8)!important;box-shadow:inset 0 0 0 1px #0009,0 2px 5px #0008!important;gap:2px!important}
#vli-tdp .original-spr-icon{width:26px;height:26px;-webkit-user-drag:none}
#vli-tdp small{font-size:8px!important;color:#ffe6a0!important;text-shadow:0 1px 2px #000}
#vli-tdp::before,#vli-tdp::after{display:none!important}
#vli-ktc{width:56px!important;height:48px!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
#vli-ktc .original-spr-icon{width:56px;height:46px;image-rendering:auto}
#vli-ktc::before,#vli-ktc::after{display:none!important}
#vli-ktc small{position:absolute;bottom:-5px;left:0;right:0;color:#ffe6a0!important;text-shadow:0 1px 2px #000;font-size:8px!important}
#vli-arc .tdp .game-icon{--game-icon-size:29px}
.game-icon-native{background:var(--game-icon-image) center/contain no-repeat;image-rendering:pixelated}
.game-icon[data-icon="ktc"]{image-rendering:auto}
.jxc-b .game-icon{--game-icon-size:30px;position:absolute;left:50%;top:5px;transform:translateX(-50%)}
#t-inv .it img,#mBody .u2cb img{object-fit:contain;image-rendering:pixelated}
.item-original-icon{width:44px;height:52px;object-fit:contain;vertical-align:middle;margin-right:8px;image-rendering:pixelated}
/* Native client: five columns, icon above a separate level strip; details on click. */
#t-skill .original-skill-frame{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;min-height:0;margin:0;border:2px solid #80765c;background:#24241e;color:#e6dfc1;font:12px/1.4 Tahoma,Arial;box-shadow:inset 0 0 0 1px #080b09}
#t-skill .original-skill-header{display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 44px;padding:0 32px;background:#878674 url('img/original/ui/skillStone.png') repeat;border-bottom:3px double #181b13;box-shadow:inset 0 0 0 1px #a7a18a}
#t-skill .original-skill-header h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#t-skill .original-skill-title{display:block;width:240px;max-width:100%;height:auto;object-fit:contain;image-rendering:auto;pointer-events:none}
#t-skill .original-skill-dismiss{position:absolute;right:4px;top:7px;width:28px;height:28px;min-width:0!important;min-height:0!important;padding:0;border:1px solid #494b37;border-radius:0;background:#3f4934;color:#f4dfac;font:22px/1 Arial;cursor:pointer}
#t-skill .original-skill-body{flex:1 1 auto;min-height:0;overflow:auto;box-sizing:border-box;padding:6px 8px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#766c48 #25251e}
#t-skill .original-skill-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:6px 0 10px}
#t-skill .original-skill-cell{min-width:0;display:flex}
#t-skill .original-skill-frame .u2k,#t-skill .original-skill-empty{box-sizing:border-box;position:relative;display:block;width:100%!important;height:74px!important;min-width:0!important;margin:0;border:0!important;border-radius:0!important;background:#25251f url('img/original/ui/skillSlot.png') center/100% 100% no-repeat!important;box-shadow:none!important;overflow:hidden}
#t-skill .original-skill-frame .u2k>img{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:44px;height:44px;object-fit:contain;image-rendering:pixelated;pointer-events:none}
#t-skill .original-skill-frame .u2k>i{display:block;position:absolute;left:1px;right:1px;bottom:1px;height:20px;padding:0;text-align:center;font:13px/20px Tahoma,Arial;color:#e5e9c9;text-shadow:0 1px #000;background:none}
#t-skill .original-skill-frame .u2k.lock{opacity:1}
#t-skill .original-skill-frame .u2k.main{outline:1px solid #e5bf5d;outline-offset:-2px}
#t-skill .original-skill-frame .u2k:focus-visible{outline:2px solid #ffe077;outline-offset:-2px}
#t-skill .original-skill-frame .u2k .plus,#t-skill .original-skill-frame .u2k .u2dt{display:none!important}
#t-skill .original-skill-body .u2tabs{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:4px;padding:0 0 4px;margin:0;border-bottom:1px solid #77725c}
#t-skill .original-skill-body .u2tabs button{font-size:11px;min-height:28px;padding:3px 7px!important;border-radius:0!important}
#t-skill .original-skill-body .u2tabs button.on{padding-left:0!important;background:none!important;border:0!important;color:#e9dca2!important;cursor:default}
#t-skill .original-skill-extra{font-size:11px;color:#c3c5a4;margin:6px 0}
#t-skill .original-skill-extra>summary{cursor:pointer;padding:4px 0;color:#d7d5af}
#t-skill .original-skill-footer{flex:0 0 auto;max-height:34%;overflow:auto;padding:6px 8px;background:#555945;border-top:3px double #191c13;text-align:center;box-shadow:inset 0 0 0 1px #8c8c70}
#t-skill .original-skill-footer .u2foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;font-size:11px;margin:0 0 4px;border:0;padding:0}
#t-skill .original-skill-footer .u2foot>span:first-child{width:100%;font-size:10px;color:#e0ddbc}
#t-skill .original-skill-footer .u2foot>.sp{display:none}
#t-skill .original-skill-footer .u2pts{order:-1;flex:0 0 100%;margin:0;font-size:12px;color:#e9e3bd}
#t-skill .original-skill-footer .u2pts b{font-size:15px;color:#fff17b}
#t-skill .original-skill-footer .btn{min-height:28px!important;padding:3px 12px!important;font-size:11px}
#t-skill .original-skill-footer .u2tip{font-size:10px;line-height:1.4;margin:4px 0;color:#e0ddbc}
#t-skill .original-skill-close{min-width:110px;min-height:30px;margin:2px 0;padding:4px 18px;border:1px solid #a3a183;border-radius:0;background:linear-gradient(#636e4f,#35402b);color:#f3e8ae;font:700 13px Tahoma,Arial;cursor:pointer;box-shadow:inset 0 0 0 1px #1f271a}
html body:is(.jxc.jxwin,:not(.jxc):not(.u20),:not(.jxc).u20.u20win) #panel:not(.hidden):has(#t-skill:not(.hidden)>.original-skill-frame){display:flex!important;flex-direction:column;position:fixed!important;z-index:9500!important;left:50%!important;right:auto!important;top:calc(12px + env(safe-area-inset-top))!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;width:min(310px,calc(100vw - 24px))!important;min-width:0!important;max-width:none!important;height:auto!important;max-height:none!important;padding:0!important;margin:0!important;border:1px solid #181b12!important;border-radius:0!important;background:#25251e!important;overflow:hidden!important;box-shadow:0 8px 26px #000c!important}
html body #panel:has(#t-skill:not(.hidden)>.original-skill-frame)>:is(#jxc-wh,#jxc-wf,#u20wh){display:none!important}
html body #panel>#t-skill:has(>.original-skill-frame){display:flex;flex:1 1 auto;min-height:0;padding:0!important;margin:0!important;height:auto!important;max-height:none!important;overflow:hidden!important;background:none!important}
@media (orientation:landscape){
 html body:is(.jxc.jxwin,:not(.jxc):not(.u20),:not(.jxc).u20.u20win) #panel:not(.hidden):has(#t-skill:not(.hidden)>.original-skill-frame){left:auto!important;right:calc(10px + env(safe-area-inset-right))!important;top:calc(6px + env(safe-area-inset-top))!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;transform:none!important}
 #t-skill .original-skill-footer{max-height:38%}
}
@media (max-width:350px){
 #t-skill .original-skill-frame .u2k,#t-skill .original-skill-empty{height:68px!important}
 #t-skill .original-skill-frame .u2k>img{width:38px;height:38px}
 #t-skill .original-skill-frame .u2k>i{height:18px;line-height:18px}
}
/* Existing live skill details and upgrade actions, using the original green tooltip palette. */
#mBody.original-skill-detail{background:rgba(4,35,27,.97)!important;color:#eef0d7;padding:14px!important;border:1px solid #778365}
#modal .mbox:has(#mBody.original-skill-detail){width:min(360px,calc(100vw - 24px))!important;max-width:none!important;background:#09271f!important;border:1px solid #8b8c67!important;border-radius:0!important}
#mBody.original-skill-detail .idet{border-bottom:1px solid #637654;padding-bottom:8px;margin-bottom:8px}
#mBody.original-skill-detail .jxsk{font:12px/1.5 Tahoma,Arial;text-align:center}
#mBody.original-skill-detail .jxsk .tt{color:#fff088;margin:12px 0 4px}
#mBody.original-skill-detail .btnrow{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
#mBody.original-skill-detail .btnrow .btn{min-height:34px;font-size:12px}
#mBody.original-market{position:relative;box-sizing:border-box;border-style:solid;border-width:54px 18px 24px;border-image-source:url('img/original/ui/ktcPanel.png');border-image-slice:54 18 24;border-image-repeat:stretch;background:#111711 url('img/original/ui/ktcTexture.png') repeat}
#mBody.original-market>h3{position:absolute;left:0;right:0;top:-43px;margin:0;height:30px;color:transparent;border:0;pointer-events:none}
#mBody.original-market .u2card{background:#101a14 url('img/original/ui/ktcCell.png') center/100% 100% no-repeat;border-color:#646c4b;color:#d9e7bf}
#mBody.original-market .u2cb img{width:36px;height:40px;object-fit:contain}
/* Closing controls stay outside the content scroll area. */
html body #modal .mbox:has(>.modal-closebar){display:flex!important;flex-direction:column;overflow:hidden!important;padding:0!important;min-height:0;max-height:calc((100dvh - 24px)/var(--fs,1))!important}
html body #modal .mbox>.modal-closebar{position:relative;flex:0 0 44px;min-height:44px;background:#252b23;border-bottom:1px solid #67674b;z-index:5}
html body #modal .modal-closebar #mClose{position:absolute!important;top:5px!important;right:7px!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:none!important;padding:0!important;margin:0!important;line-height:30px!important;font-size:18px!important;z-index:6}
html body #modal .mbox>#mBody{flex:1 1 auto;min-height:0;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;padding:12px;max-height:calc((100dvh - 24px)/var(--fs,1) - 48px)}
html body #jxc-tip .bx{display:flex;flex-direction:column;overflow:hidden!important;padding:0!important}
html body #jxc-tip .tip-closebar{position:relative;flex:0 0 42px;min-height:42px;background:#171d18;border-bottom:1px solid #5d5d5a}
html body #jxc-tip .tip-closebar .tx{position:absolute!important;right:6px!important;top:4px!important;width:34px!important;height:34px!important;margin:0!important;min-width:34px!important;padding:0!important}
html body #jxc-tip .tip-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 12px 8px;max-height:calc(100dvh - 84px)}
html.jxc-lock #jxc-tip .tip-scroll{touch-action:pan-y;overscroll-behavior:contain}
#modal .mbox:has(#mBody.original-market) #mClose,
#modal:has(#mBody.original-market) #mClose,
#modal.u2ktc #mClose {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  z-index: 100005 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid #e0c27b !important;
  background: radial-gradient(circle at 40% 35%, #5a4b2a, #1a150b) !important;
  color: #fff8dc !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.85), inset 0 0 4px rgba(255,215,100,0.4) !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#modal .mbox:has(#mBody.original-market) #mClose:hover,
#modal:has(#mBody.original-market) #mClose:hover,
#modal.u2ktc #mClose:hover {
  filter: brightness(1.25) !important;
  border-color: #ffebad !important;
  transform: scale(1.06) !important;
}
#modal .mbox:has(#mBody.original-market) #mClose:active,
#modal:has(#mBody.original-market) #mClose:active,
#modal.u2ktc #mClose:active {
  transform: scale(0.94) !important;
}
@media (max-width: 640px), (pointer: coarse) {
  #modal .mbox:has(#mBody.original-market) #mClose,
  #modal:has(#mBody.original-market) #mClose,
  #modal.u2ktc #mClose {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 20px !important;
    top: 6px !important;
    right: 8px !important;
  }
}