/* Season 4 presentation. The original 640 x 480 interface uses a 51-unit HUD. */
:root { --u: calc(100vw / 640); --v: min(calc(100vh / 480), calc(100vw / 640)); --hud-height: calc(var(--v) * var(--hud-native-height, 51)); }
.playing { font-family: Arial, sans-serif; }
.playing #world { cursor: crosshair; }
.playing header {
  inset: 0 auto auto 0; width: calc(var(--v) * 70); height: calc(var(--v) * 25);
  padding: 0; gap: 0; background: url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_position02.tga') 0 0 / 100% 100% no-repeat;
  border: 0; border-radius: 0; box-shadow: none; color: #fff; z-index: 6;
}
.playing .brand, .playing .chapter .eyebrow, .playing #worldName { display: none; }
.playing .chapter { position: absolute; left: calc(var(--v) * 13); top: calc(var(--v) * 3); width: calc(var(--v) * 43); height: calc(var(--v) * 13); display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0; gap: 0; padding: 0; }
.playing .chapter > #coordinates { font: calc(var(--v) * 8) / 1 Arial, sans-serif; color: #fff; white-space: pre; text-shadow: 1px 1px #000; }
.playing .topright { margin: 0; }
.playing .live { display: none; }
.playing #characterToggle, .playing #fullscreen {
  position: fixed; bottom: calc(var(--v) * 10); top: auto; padding: 0;
  width: calc(var(--u) * 30); height: calc(var(--v) * 41);
  border: 0; border-radius: 0; box-shadow: none;
  font-size: 0; color: transparent; z-index: 5;
  background: url('https://servidor.muworld.net/api/texture?dir=Interface%2FpartCharge1&file=newui_menu_Bt01.jpg') left top / 100% 400% no-repeat;
}
.playing #characterToggle { left: calc(var(--u) * 519); }
.playing #fullscreen {
  left: calc(var(--u) * 579);
  background-image: url('https://servidor.muworld.net/api/texture?dir=Interface%2FpartCharge1&file=newui_menu_Bt04.jpg');
}
.playing #characterToggle kbd { display: none; }
.playing #characterToggle:hover, .playing #fullscreen:hover { background-position-y: 33.333%; filter: brightness(1.35); }
.playing #characterToggle:focus-visible, .playing #fullscreen:focus-visible { outline: 1px solid #ffda80; }

/* Full-width original stone frame, rather than floating panels. */
.playing #hud {
  position: fixed; left: 0; right: 0; bottom: 0; transform: none;
  display: block; width: 100%; max-width: none; height: var(--hud-height);
  border: 0; border-radius: 0; padding: 0; background: #080a08;
  box-shadow: 0 -1px 4px #000b; z-index: 4;
}
.hudFrames { position: absolute; inset: 0; display: flex; pointer-events: none; }
.hudFrames i { display: block; height: 100%; flex: 0 0 40%; background-size: 100% 100%; background-repeat: no-repeat; }
.hudFrames i:nth-child(1) { background-image: url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_menu01.jpg'); }
.hudFrames i:nth-child(2) { flex-basis: 20%; background-image: url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_menu02.jpg'); }
.hudFrames i:nth-child(3) { background-image: url('https://servidor.muworld.net/api/texture?dir=Interface%2FpartCharge1&file=newui_menu03.jpg'); }
.playing .identity { position: fixed; left: 20px; bottom: calc(var(--hud-height) + 14px); width: 170px; gap: 2px; text-shadow: 1px 1px 2px #000; pointer-events: none; }
.playing .identity > span { font: 9px Arial; color: #b9b895; letter-spacing: 0; }
.playing .identity strong { font: 12px Arial; color: #e6cf83; }
.playing .identity small { font: 10px Arial; color: #c2bc94; }
.playing #hud .orb {
  position: absolute; top: calc(var(--v) * 3); width: calc(var(--u) * 45);
  height: calc(var(--v) * 39); display: block; border: 0; border-radius: 0;
  box-shadow: none; background: transparent;
}
.playing .orb.life { left: calc(var(--u) * 158); }
.playing .orb.mana { left: calc(var(--u) * 437); }
.playing .orb:before {
  content: ''; position: absolute; inset: 0; background-size: 100% 100%;
  background-repeat: no-repeat; clip-path: inset(var(--empty, 0%) 0 0 0);
  transition: clip-path .15s linear;
}
.playing .life:before { background-image: url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_menu_red.jpg'); }
.playing .mana:before { background-image: url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_menu_blue.jpg'); }
.playing .orb > span {
  position: absolute; bottom: calc(var(--v) * -1); left: 0; right: 0; z-index: 1;
  text-align: center; color: #d9d9c8; font: bold clamp(10px, 1.05vw, 17px) Arial;
  text-shadow: 1px 1px #000, -1px -1px #000; letter-spacing: 1px;
}
.playing .orb small { display: none; }
.playing .actions {
  position: absolute; top: calc(var(--v) * 2); left: calc(var(--u) * 222);
  width: calc(var(--u) * 160); height: calc(var(--v) * 38);
}
.playing #hotbar { display: flex; gap: 0; min-width: 0; width: 100%; height: 100%; }
.playing .skill {
  position: relative; flex: 0 0 20%; width: 20%; height: 100%; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.skillIcon {
  position: absolute; left: 18.75%; top: 15.79%; width: 62.5%; height: 73.684%;
  display: block; background-size: 1280% 914.286%; background-repeat: no-repeat;
  filter: brightness(.9);
}
.playing .skill.selected { box-shadow: inset 0 0 0 1px #d0b573; border: 0; background: #b6a15a15; }
.playing .skill.selected .skillIcon { filter: brightness(1.2) drop-shadow(0 0 2px #e6c575); }
.playing .skill:hover { background: #d9bd5330; }
.playing .skill > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.playing .skill kbd { top: auto; bottom: -1px; left: 4px; font: bold clamp(9px, .85vw, 14px) Arial; color: #c5c8af; z-index: 2; text-shadow: 1px 1px #000; }
.playing .help { display: none; }
.playing .wealth { display: contents; }
.playing #zen { position: absolute; right: 4px; top: calc(var(--v) * -10); font: 10px Arial; color: #ddd188; text-shadow: 1px 1px #000; }
.playing #potion {
  position: absolute; left: calc(var(--u) * 1); top: calc(var(--v) * 2);
  width: calc(var(--u) * 38); height: calc(var(--v) * 37); border: 0;
  background: transparent; padding: 0; border-radius: 0;
}
.playing #potion:hover { background: #b7a56322; }
.potionBottle {
  position: absolute; left: 28%; top: 12%; width: 44%; height: 70%;
  clip-path: polygon(35% 0, 65% 0, 65% 21%, 84% 37%, 100% 78%, 88% 100%, 12% 100%, 0 78%, 16% 37%, 35% 21%);
  background: linear-gradient(100deg, #626961 0, #dadfc459 20%, #631500 32%, #f8310e 52%, #af140b 72%, #330500 100%);
  box-shadow: inset 0 0 6px #ffe8ab; filter: drop-shadow(0 0 2px #000);
}
.potionCount { position: absolute; bottom: -1px; left: 2px; right: 0; color: #b6c1b0; font: bold clamp(9px, 1vw, 15px) Arial; letter-spacing: 1px; text-shadow: 1px 1px #000; }
.playing #performance { position: fixed; top: 8px; right: 9px; padding: 4px 7px; background: #0008; border-radius: 3px; pointer-events: none; font: bold clamp(15px, 1vw, 22px) Arial; color: #e8d991; text-shadow: 1px 1px #000; }
.playing .xp { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--v) * 4); margin: 0; background: transparent; border: 1px solid #5a5849; }
.playing .xp i { height: 100%; background: linear-gradient(#847132, #d3b05b, #706326); box-shadow: 0 0 3px #c7b86f; }
.stamina { position: absolute; left: calc(var(--u) * 487); top: calc(var(--v) * 2); width: calc(var(--u) * 7); height: calc(var(--v) * 37); background: #0d0c08; border: 1px ridge #666457; }
.stamina i { position: absolute; bottom: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #6d4c04, #d8b63f, #705713); }
.hudVersion { position: absolute; right: 7px; top: calc(var(--v) * -23); font: bold 11px Georgia; color: #b88338; letter-spacing: 1px; text-shadow: 1px 1px #111; }

/* Original winged minimap frame, anchored above the right end of the bar. */
.playing #mapPanel {
  position: fixed; inset: auto 9px calc(var(--hud-height) + 8px) auto;
  width: clamp(135px, 15.625vw, 225px); height: auto; aspect-ratio: 128 / 193;
  padding: 0; background: url('https://servidor.muworld.net/api/texture?dir=Interface&file=Miniframe.tga') center / 100% 100% no-repeat;
  border: 0; border-radius: 0; z-index: 3;
}
.playing #mapPanel .eyebrow, .playing #assetStatus { display: none; }
.playing #maps {
  position: absolute; top: 25.5%; left: 8%; width: 84%; margin: 0;
  background: #111710a8; color: #cecbb2; border: 0; border-radius: 0;
  font: clamp(9px, .8vw, 12px) Arial; padding: 1px 2px; height: 9%;
}
.playing #minimap {
  position: absolute; left: 6%; right: 6%; top: 36.5%; bottom: 5.5%; height: auto;
  border: 0; border-radius: 0; opacity: .88; background-color: #10180f;
  box-shadow: inset 0 0 14px #000b;
}
.playing #mapDot { width: 5px; height: 5px; border-radius: 0; background: #fff66a; box-shadow: 0 0 4px #fff76b; }
#worldMessages {
  position: fixed; left: 18px; top: 110px; width: 300px; max-width: 55vw;
  pointer-events: none; z-index: 2; font: 11px/1.7 Arial;
  color: #c8bb76; text-shadow: 1px 1px 1px #000;
}
#worldMessages > div { margin: 3px 0; background: linear-gradient(90deg, #101a1266, transparent); padding: 1px 3px; }
#worldMessages > div:nth-child(n+2) { color: #8eabc6; }
.playing #target { top: 9px; padding: 5px 24px; font: 12px Arial; border: 2px ridge #7d8072; border-radius: 4px; background: #111710cc; }
.playing #target small { font: 10px Arial; margin-top: 2px; }
.playing #toast { top: 60px; color: #edc866; font: 12px Arial; border: 1px solid #727163; border-radius: 0; background: #10160ee0; padding: 6px 15px; }

/* Keep the entry screen consistent with the classic game's materials. */
#welcome { background: #070c10ee; }
.welcomeContent { border-right: 3px ridge #6c6c58; background: linear-gradient(100deg, #0b1117, #0b1117e6); }
.welcomeContent h1 { font-family: Georgia, serif; color: #e2d2a3; text-shadow: 0 2px 3px #000; }
.welcomeContent input { border: 2px inset #777963; border-radius: 0; background: #0a110d; color: #e2d2a3; }
.classCard { border: 2px ridge #626a58; border-radius: 1px; background: linear-gradient(#333b2b, #111b13); }
.classCard.selected { border-color: #b29d5b; background: linear-gradient(#555337, #22291a); box-shadow: inset 0 0 12px #000; }
.primary { border: 3px ridge #b5a36f; border-radius: 0; color: #e6d5a4; text-shadow: 1px 1px #000; background: linear-gradient(#59543c, #20291c); }
.primary:hover { background: linear-gradient(#71674b, #333e29); }
@media (max-width: 800px) {
  .playing #worldMessages { top: 75px; font-size: 9px; width: 220px; }
  .playing .identity { bottom: calc(var(--hud-height) + 10px); left: 12px; }
  .playing #mapPanel { right: 4px; bottom: calc(var(--hud-height) + 4px); width: 130px; }
  .playing .hudVersion { font-size: 9px; }
  .playing #character { right: 10px; top: 50px; width: 235px; }
}
@media (max-width: 520px) {
  :root { --u: calc(100vw / 640); --v: calc(100vw / 640); --hud-height: calc(var(--v) * 51); }
  .playing #hud { width: 100%; left: 0; transform: none; height: var(--hud-height); }
  .playing #characterToggle { left: auto; right: 34px; bottom: 5px; width: 25px; height: 34px; }
  .playing #fullscreen { left: auto; right: 5px; bottom: 5px; width: 25px; height: 34px; }
  .playing #worldMessages { display: none; }
}

/* Siege-war minimap assets and original 640 x 480 gauge coordinates. */
.playing #mapPanel { inset:auto 0 var(--hud-height) auto; width:calc(var(--u)*154);height:calc(var(--v)*195);aspect-ratio:auto;background:none;pointer-events:none; }
.playing #mapPanel::before,.playing #mapPanel::after {content:'';position:absolute;pointer-events:none;background-size:100% 100%;z-index:2;}
.playing #mapPanel::before {inset:0 auto auto 0;width:100%;height:calc(var(--v)*162);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_SW_Minimap_Frame.tga');}
.playing #mapPanel::after {left:calc(var(--u)*20);top:calc(var(--v)*158);width:calc(var(--u)*134);height:calc(var(--v)*37);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_SW_Time_Frame.tga');}
.playing #minimap {left:calc(var(--u)*25);top:calc(var(--v)*28);width:calc(var(--u)*128);height:calc(var(--v)*128);right:auto;bottom:auto;background-repeat:no-repeat;opacity:1;overflow:hidden;box-shadow:none;}
.playing #mapOpacity,.playing #mapZoom {position:absolute;pointer-events:auto;z-index:3;background:transparent;border:0;padding:0;color:#fff;}
.playing #mapOpacity {left:calc(var(--u)*58);top:calc(var(--v)*5);width:calc(var(--u)*37);height:calc(var(--v)*19);font:bold clamp(9px,.75vw,13px) Arial;}
.playing #mapZoom {right:calc(var(--u)*3);top:calc(var(--v)*4);width:calc(var(--u)*22);height:calc(var(--v)*20);}
.playing .stamina,.playing .shieldGauge {position:absolute;top:calc(var(--v)*2);width:calc(var(--u)*16);height:calc(var(--v)*39);border:0;background:#060608;overflow:visible;isolation:isolate;}
.playing .stamina {left:calc(var(--u)*420);}
.playing .shieldGauge {left:calc(var(--u)*204);filter:none;}
/* Decoded 16 x 39 artwork excludes the original OpenGL texture padding. */
.playing .stamina i,.playing .shieldGauge i {position:absolute;inset:0;width:100%;height:100%!important;clip-path:inset(var(--empty,100%) 0 0 0);background-position:left top;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;}
.playing .stamina i {background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_menu_AG.jpg');}
.playing .shieldGauge i {background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_menu_SD.jpg');}
.playing .stamina span,.playing .shieldGauge span {position:absolute;bottom:0;left:calc(var(--u)*10);transform:translateX(-50%);color:#e8dfbd;font:bold clamp(10px,1vw,17px) Arial;line-height:1;white-space:nowrap;text-shadow:1px 1px 2px #000,-1px -1px 1px #000;z-index:1;pointer-events:none;}
.playing .shieldGauge span {left:calc(var(--u)*15);}
.playing #menuToggle {position:fixed;left:calc(var(--u)*609);right:auto;bottom:calc(var(--v)*10);top:auto;width:calc(var(--u)*30);height:calc(var(--v)*41);border:0;padding:0;font-size:0;background:url('https://servidor.muworld.net/api/texture?dir=Interface%2FpartCharge1&file=newui_menu_Bt04.jpg') left top / 100% 400%;z-index:5;}
.playing #menuToggle:hover {background-position-y:33.333%;}
.playing #fullscreen {left:calc(var(--u)*579);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface%2FpartCharge1&file=newui_menu_Bt03.jpg');}

#itemShop {position:fixed;z-index:20;left:50%;top:46%;transform:translate(-50%,-50%);width:min(850px,92vw);height:min(580px,78vh);padding:14px;color:#ddd4b3;border:4px ridge #87857a;background:#101410f5;box-shadow:0 8px 40px #000;display:flex;flex-direction:column;gap:10px;font:13px Arial;}
#itemShop[hidden]{display:none}.shopHeader{display:flex;align-items:center;justify-content:space-between}.shopHeader h2{margin:0;color:#dec080;font:22px Georgia}.shopHeader button{padding:2px 10px}.shopNote{margin:0;color:#a8ae9b;font-size:11px}.shopTools{display:flex;gap:8px}.shopTools input{flex:1;min-width:80px}.shopTools input,.shopTools select{border:2px inset #717267;background:#090d09;color:#ddd4b3;padding:6px}.shopBody{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:0;flex:1}#itemList{overflow:auto;border:1px solid #5c6050;background:#060b08}.shopItem{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-bottom:1px solid #30392d;border-radius:0;background:#172015;color:#ded6bc}.shopItem strong,.shopItem small{display:block}.shopItem small{color:#99a18d;margin-top:4px;font-size:10px}.shopItem:hover,.shopItem.selected{background:#3d4129;color:#ffe8a5}.itemDetail{overflow:auto;min-width:0}.itemDetail h3{color:#f1d488;margin:10px 0}.itemDetail p{font-size:11px;line-height:1.6}#itemPreview{height:210px;border:1px ridge #7d7d66;position:relative;background:transparent}#previewStatus{position:absolute;inset:45% 10px auto;text-align:center;color:#b2b6a3;font-size:11px}.shopFooter{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}#shopResult{color:#a9d69a;min-height:18px}#itemShop button{cursor:pointer}#itemShop button:disabled{opacity:.4;cursor:default}#systemMenu label{display:block;font-size:11px}#systemMenu select{max-width:100%;width:100%;position:static;margin:5px 0 10px}

.playing button#menuToggle {left:calc(var(--u)*609);border:0;font-size:0;background:url('https://servidor.muworld.net/api/texture?dir=Interface%2FpartCharge1&file=newui_menu_Bt04.jpg') left top / 100% 400%;}
.playing #systemMenu #maps {position:static;display:block;width:100%;height:auto;margin:6px 0 14px;padding:6px;font:12px Arial;}
.playing #hudInventory,.playing #hudShop {position:fixed;bottom:calc(var(--v)*10);height:calc(var(--v)*41);width:calc(var(--u)*30);padding:0;border:0;font-size:0;background:url('https://servidor.muworld.net/api/texture?dir=Interface%2FpartCharge1&file=newui_menu_Bt02.jpg') left top / 100% 400%;z-index:6;}
.playing #hudInventory {left:calc(var(--u)*549);}.playing #hudShop{left:calc(var(--u)*489);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface%2FpartCharge1&file=newui_menu_Bt05.jpg');}
.playing #hudInventory:hover,.playing #hudShop:hover {background-position-y:33.333%;}

#itemPreview canvas {position:static;inset:auto;transform:none;width:100%;height:100%;pointer-events:none;z-index:auto;}

.shopTools input {width:0;flex:1;margin:0;} .shopTools select {width:38%;margin:0;}

/* CNewUIMyInventory native panel: 190 x 429, equipment and 8 x 8 cells. */
#classicInventory{--iv:calc((100vh - var(--hud-height))/429);position:fixed;right:0;top:0;width:calc(var(--u)*190);height:calc(var(--iv)*429);z-index:10;color:#ddd;font:clamp(9px,.75vw,13px) Arial;background:#101010;}
#classicInventory .invBack,#classicInventory .invTop,#classicInventory .invLeft,#classicInventory .invRight,#classicInventory .invBottom{position:absolute;pointer-events:none;background-size:100% 100%;}
.invBack{inset:0;background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_back.jpg')}.invTop{inset:0 0 auto;height:calc(var(--iv)*64);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_back04.tga')}.invLeft{left:0;top:calc(var(--iv)*64);width:calc(var(--u)*21);height:calc(var(--iv)*320);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_back02-L.tga')}.invRight{right:0;top:calc(var(--iv)*64);width:calc(var(--u)*21);height:calc(var(--iv)*320);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_back02-R.tga')}.invBottom{bottom:0;left:0;width:100%;height:calc(var(--iv)*45);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_back03.tga')}
#classicInventory h2{position:absolute;left:0;right:0;top:calc(var(--iv)*12);margin:0;text-align:center;font:bold clamp(9px,.75vw,13px) Arial;pointer-events:none}.invTabs{position:absolute;top:calc(var(--iv)*25);left:25%;right:25%;display:flex;justify-content:space-between;color:#8c8c8c;font-size:clamp(8px,.65vw,12px)}.invSlot{position:absolute;left:calc(var(--u)*var(--x));top:calc(var(--iv)*var(--y));width:calc(var(--u)*var(--w));height:calc(var(--iv)*var(--h));background-size:100% 100%}
#inventoryGrid{position:absolute;left:calc(var(--u)*15);top:calc(var(--iv)*200);width:calc(var(--u)*160);height:calc(var(--iv)*160);background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga') left top / calc(var(--u)*20) calc(var(--iv)*20);border:1px ridge #9b9b94;}
#classicInventory .invItem{position:absolute;left:calc(var(--u)*20*var(--x));top:calc(var(--iv)*20*var(--y));width:calc(var(--u)*20*var(--w));height:calc(var(--iv)*20*var(--h));border:0;border-radius:0;padding:0;background:#104e4c38;cursor:pointer;}#classicInventory .invItem:hover,#classicInventory .invItem:focus-visible{background:#17417b88;outline:1px solid #406eac}.invItem img{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}.invItem small{position:absolute;bottom:1px;right:2px;color:#fff;font:bold 11px Arial;text-shadow:1px 1px #000}.invFallback{font-size:9px;color:#ddd;padding:2px}
.invMoney{position:absolute;left:calc(var(--u)*11);top:calc(var(--iv)*364);width:calc(var(--u)*170);height:calc(var(--iv)*26);background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_money.tga') center / 100% 100%;display:flex;align-items:center;padding-left:calc(var(--u)*38);color:#edc94e;text-shadow:1px 1px #000;font-weight:bold}.invExit{position:absolute;left:calc(var(--u)*13);top:calc(var(--iv)*391);width:calc(var(--u)*36);height:calc(var(--iv)*29);padding:0;border:0;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_exit_00.tga') left top / 100% 200%}.invExit:hover{background-position-y:100%}.invTopClose{position:absolute;right:calc(var(--u)*6);top:calc(var(--iv)*5);width:calc(var(--u)*18);height:calc(var(--iv)*18);padding:0;border:0;background:transparent}.invTopClose:hover{background:#ffda7222}.invPages{position:absolute;left:32%;right:9%;top:calc(var(--iv)*393);display:flex;align-items:center;justify-content:center;gap:8px}.invPages button{padding:0 7px;background:#111;border:1px ridge #777;color:#c5b689}.invTooltip{position:absolute;right:calc(100% + 10px);bottom:20%;width:230px;max-width:40vw;background:#080d0bef;border:1px solid #97865e;padding:12px;color:#c8ccbc;z-index:12;font:11px/1.4 Arial;pointer-events:none}.invTooltip strong{display:block;color:#e3c16e}.invTooltip p{margin:5px 0}
#inventoryIconCanvas{position:fixed;left:-1000px;top:0;width:192px;height:192px;inset:auto auto auto -1000px;pointer-events:none;opacity:0;z-index:-1;}

.invItem img{object-fit:contain;padding:2px;}

#inventoryTooltip{position:fixed;right:auto;bottom:auto;width:max-content;min-width:220px;max-width:min(340px,80vw);padding:10px 5px 16px;border:2px solid #000;background:#000d;text-align:center;color:#ddd;font:clamp(10px,.65vw,13px)/1.35 Arial;box-shadow:none;z-index:31;}
.tipLine{min-height:1em;white-space:normal}.tipLine.title{color:#fff;font-weight:bold}.tipLine.excellent{color:#00ff78;font-weight:bold}.tipLine.blue{color:#82afff}.tipLine.red{color:#f22}.tipLine.option{color:#ffdf00}.tipLine.classDenied{background:#a00000;color:white;margin:5px 0}.tipLine.classAllowed{color:white;margin:4px 0}
.invItem.picked{background:#17417b88!important;outline:1px solid #406eac!important}.invItem.picked img,.invItem.picked small,.invItem.picked .invFallback{visibility:hidden}
#inventoryCarry{position:fixed;inset:auto;pointer-events:none;z-index:35;filter:drop-shadow(0 6px 3px #0009);}
.invDrop{position:absolute;pointer-events:none;border:1px solid #406eac;background:#17417b88;z-index:5}.invDrop[data-valid=false]{border-color:#df6666;background:#c33a3a55}

#classicInventory .invSlot{padding:0;border:0;cursor:pointer;background-color:transparent;background-size:100% 100%;background-repeat:no-repeat;background-position:0 0;display:flex;align-items:center;justify-content:center;}#classicInventory .invSlot img{width:calc(var(--u)*var(--iw));height:calc(var(--iv)*var(--ih));object-fit:contain;pointer-events:none;}
/* Native 20 x 20 cells define the footprint; previews retain category proportions. */
/* NewUIInventoryCtrl::Render: occupied-cell RGBA (.3,.5,.5,.6), then IMAGE_ITEM_SQUARE. */
#classicInventory .invItem,#classicInventory .invItem:hover,#classicInventory .invItem:focus-visible{background-color:rgba(77,128,128,.6)!important;background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga');background-size:calc(var(--u)*20) calc(var(--iv)*20);background-repeat:repeat;outline:0!important;box-shadow:none;}
#classicInventory .invItem.picked,#classicInventory .invSlot:hover,#classicInventory .invSlot.picked{background-color:transparent!important;outline:0!important;box-shadow:none;}
#classicInventory .invItem img{padding:0;}
#classicInventory [data-group="7"] img{transform:scale(.68);}
#classicInventory [data-group="0"] img{transform:scale(1.1);}
#classicInventory .rotating img,#classicInventory .invSlot.picked img{visibility:hidden;}
#inventoryHover{position:fixed;pointer-events:none;z-index:11;background:transparent;}
.invDrop{border-color:transparent;background:transparent;}

/* Source HUD images already have their native crop (51px frame, 39px gauges). */
.playing #activeSkill{position:absolute;left:calc(var(--u)*385);top:calc(var(--v)*2);width:calc(var(--u)*32);height:calc(var(--v)*38);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
.playing #activeSkill:hover{background:#d9bd5320;}
.playing .skill.selected{background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_skillbox2.jpg') left top / 100% 100% no-repeat;box-shadow:none;}
.playing .skill.selected .skillIcon{filter:none;}
.playing .potionArt{position:absolute;left:calc(var(--u)*9);top:calc(var(--v)*12);width:calc(var(--u)*20);height:calc(var(--v)*20);object-fit:contain;pointer-events:none;}
.playing .xp{left:calc(var(--u)*2);bottom:calc(var(--v)*3);width:calc(var(--u)*629);height:calc(var(--v)*4);border:0;}
.playing .orb>span{bottom:0;letter-spacing:0;}

/* The source slot is empty while carrying; only the placement preview is blue. */
#classicInventory .invItem.picked,#classicInventory .invSlot.picked{background-color:transparent!important;}
#classicInventory .invDrop[data-valid=true]{border-color:#406eac;background-color:rgba(23,65,123,.6);}
/* CNewUICharacterInfoWindow: original 190 x 429 panel and native stat rows. */
.playing #character{--cv:calc((100vh - var(--hud-height))/429);position:fixed;inset:0 0 auto auto;width:calc(var(--u)*190);height:calc(var(--cv)*429);padding:0;border:0;border-radius:0;background:#101010;color:#ddd;font:clamp(9px,.65vw,13px) Arial;z-index:11;}
#character .charFrame{position:absolute;inset:0;pointer-events:none;}
#character .charFrame i{position:absolute;display:block;background-size:100% 100%;}
#character .invTop{height:calc(var(--cv)*64);}
#character .invLeft{top:calc(var(--cv)*64);width:calc(var(--u)*21);height:calc(var(--cv)*320);}
#character .invRight{top:calc(var(--cv)*64);width:calc(var(--u)*21);height:calc(var(--cv)*320);}
#character .invBottom{height:calc(var(--cv)*45);}
#character h2{position:absolute;left:0;right:0;top:calc(var(--cv)*12);margin:0;font:bold clamp(9px,.65vw,13px) Arial;text-align:center;}
#character #characterClass{position:absolute;left:0;right:0;top:calc(var(--cv)*27);margin:0;color:#ddd;text-align:center;font:inherit;}
#character .charTopClose{position:absolute;right:calc(var(--u)*6);top:calc(var(--cv)*5);width:calc(var(--u)*18);height:calc(var(--cv)*18);padding:0;border:0;background:transparent;}
#character .charSummary{position:absolute;left:calc(var(--u)*12);top:calc(var(--cv)*48);width:calc(var(--u)*165);height:calc(var(--cv)*71);padding:calc(var(--cv)*8) calc(var(--u)*4);}
.charSummaryFrame{position:absolute;inset:0;pointer-events:none;}
.charSummaryFrame .edge{position:absolute;background-size:100% 100%;width:calc(var(--u)*14);height:calc(var(--cv)*14);}
.charSummaryFrame .e0{top:0;left:0;}.charSummaryFrame .e1{top:0;right:0;}.charSummaryFrame .e2{bottom:0;left:0;}.charSummaryFrame .e3{bottom:0;right:0;}
.charSummaryFrame .e4,.charSummaryFrame .e5{left:calc(var(--u)*14);right:calc(var(--u)*14);width:auto;height:calc(var(--cv)*14);}.charSummaryFrame .e4{top:0;}.charSummaryFrame .e5{bottom:0;}
.charSummaryFrame .e6,.charSummaryFrame .e7{top:calc(var(--cv)*14);bottom:calc(var(--cv)*14);height:auto;}.charSummaryFrame .e6{left:0;}.charSummaryFrame .e7{right:0;}
#character .charLevel{height:calc(var(--cv)*18);display:flex;justify-content:space-between;padding-right:calc(var(--u)*10);color:#ffff00;border-bottom:1px solid #777;}
#character #characterPoints{color:#ff9d00;}
#character .charSummary p{font:inherit;margin:calc(var(--cv)*7) 0 0;}
#character #characterResources{color:#39c6ff;}
#character #stats>.charStat{position:absolute;left:calc(var(--u)*11);top:calc(var(--cv)*var(--sy));width:calc(var(--u)*170);height:calc(var(--cv)*21);padding:0;border:0;display:block;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_cha_textbox02.tga') left top / 100% 100% no-repeat;font:inherit;}
#character .statLabel,#character .statValue{position:absolute;top:calc(var(--cv)*7);width:44%;text-align:center;color:#ffff00;font:inherit;}.statLabel{left:0;}.statValue{left:44%;}
#character #stats .statAdd{position:absolute;left:calc(var(--u)*149);top:calc(var(--cv)*2);width:calc(var(--u)*16);height:calc(var(--cv)*15);padding:0;margin:0;border:0;border-radius:0;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_chainfo_btn_level.tga') left top / 100% 200% no-repeat;}
#character #stats .statAdd:hover:enabled{background-position-y:100%;}#character #stats .statAdd:disabled{opacity:.45;cursor:default;}
#character .statDetails{position:absolute;left:calc(var(--u)*8);top:calc(var(--cv)*22);font:inherit;color:#ddd;}
#character .statDetails p{font:inherit;margin:calc(var(--cv)*5) 0 0;white-space:nowrap;}
#character .charBottom{position:absolute;left:calc(var(--u)*13);top:calc(var(--cv)*392);display:flex;gap:calc(var(--u)*1);}
#character .charBottom button{width:calc(var(--u)*36);height:calc(var(--cv)*29);padding:0;border:0;border-radius:0;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_exit_00.tga') left top / 100% 200% no-repeat;}
#character .charBottom button:hover:enabled{background-position-y:100%;}
#character .charBottom .charQuest{background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_chainfo_btn_quest.tga');}#character .charBottom .charPet{background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_chainfo_btn_pet.tga');}#character .charBottom .charMaster{background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_chainfo_btn_master.tga');}
#character .charBottom button:disabled{opacity:.6;cursor:default;}
#classicInventory .invSlot[data-invalid-equip=true]::after{content:'';position:absolute;inset:0;background:rgba(210,28,28,.45);box-shadow:inset 0 0 0 1px #db6868;pointer-events:none;}
.shopFinish{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:12px 0;color:#d8d1bc;font:12px Arial}.shopFinish label{display:flex;align-items:center;gap:7px;margin:0}.shopFinish select{position:static;inset:auto;width:70px;margin:0;padding:4px;background:#111a14;color:#e6d59e;border:1px solid #6c7059}.shopFinish input[type=checkbox]{position:static;inset:auto;width:14px;height:14px;margin:0}
#inventoryLive{position:absolute;inset:0;transform:none;width:100%;height:100%;pointer-events:none;z-index:2;background:transparent}#inventoryLive[hidden]{display:none}#classicInventory .liveItem img{visibility:hidden}#classicInventory .invItem small{z-index:3}
#skillPalette{position:fixed;left:50%;bottom:calc(var(--hud-height) + 10px);transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:4px;max-width:85vw;max-height:45vh;overflow:auto;padding:10px;background:#080b0aee;border:2px ridge #a2987a;z-index:30}#skillPalette[hidden],.shopFinish[hidden]{display:none}#skillPalette button{font:12px Arial;color:#dfd1a5;background:#252a22;padding:8px;border:1px solid #73745a}#skillPalette button.selected{color:#ffe091;border-color:#e6b83f}
#classicMerchant{--iv:calc((100vh - var(--hud-height))/429);position:fixed;right:calc(var(--u)*190);top:0;width:calc(var(--u)*190);height:calc(var(--iv)*429);z-index:10;color:#ddd;font:clamp(9px,.75vw,13px) Arial;background:#101010}
#classicMerchant .invBack,#classicMerchant .invTop,#classicMerchant .invLeft,#classicMerchant .invRight,#classicMerchant .invBottom{position:absolute;pointer-events:none;background-size:100% 100%}
#classicMerchant h2{position:absolute;left:0;right:0;top:calc(var(--iv)*12);margin:0;text-align:center;font:bold clamp(9px,.75vw,13px) Arial;pointer-events:none}
.merchantTax{position:absolute;top:calc(var(--iv)*25);left:0;right:0;margin:0;text-align:center;font-size:clamp(8px,.65vw,12px)}
.merchantGrid{position:absolute;left:calc(var(--u)*15);top:calc(var(--iv)*50);width:calc(var(--u)*160);height:calc(var(--iv)*300);border:1px ridge #9b9b94;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga') 0 0 / calc(var(--u)*20) calc(var(--iv)*20)}
#classicMerchant .invItem{position:absolute;left:calc(var(--u)*20*var(--x));top:calc(var(--iv)*20*var(--y));width:calc(var(--u)*20*var(--w));height:calc(var(--iv)*20*var(--h));padding:0;border:0;border-radius:0;background-color:rgba(77,128,128,.6);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga');background-size:calc(var(--u)*20) calc(var(--iv)*20);outline:0;box-shadow:none}
#classicMerchant .invItem img{padding:0}#classicMerchant .rotating img{visibility:hidden}
#classicMerchant [data-group="7"] img{transform:scale(.68)}#classicMerchant [data-group="0"] img{transform:scale(1.1)}
.merchantPages{position:absolute;top:calc(var(--iv)*390);left:20%;right:20%;display:flex;justify-content:center;gap:8px}.merchantPages[hidden]{display:none}.merchantPages button{padding:0 7px;background:#111;border:1px ridge #777;color:#c5b689}
/* Keep the inventory's fixed tooltip above its neighboring merchant panel. */
#classicMerchant{z-index:9}
/* Native 32x38 skill tiles grow around the active-skill position (385,390). */
#skillPalette{inset:0;left:0;top:0;bottom:0;right:0;transform:none;display:block;max-width:none;max-height:none;padding:0;overflow:visible;background:none;border:0;pointer-events:none}
#skillPalette .skillListIcon{position:absolute;pointer-events:auto;left:calc(var(--u)*(385 + var(--column)*32));bottom:calc(var(--hud-height) + var(--v)*(3 + var(--row)*38));width:calc(var(--u)*32);height:calc(var(--v)*38);padding:0;border:0;border-radius:0;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_skillbox.jpg') center / 100% 100%;box-shadow:none}
#skillPalette .skillListIcon.selected,#skillPalette .skillListIcon:hover,#skillPalette .skillListIcon:focus-visible{background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_skillbox2.jpg');outline:0}
#skillPalette kbd,.playing #activeSkill kbd{position:absolute;right:2px;bottom:0;left:auto;margin:0;padding:0;border:0;background:none;border-radius:0;color:#fff;text-shadow:1px 1px #000;font:bold clamp(10px,1vw,17px) Arial;z-index:2}
.playing .skill:disabled{opacity:1;cursor:default;background:none}
#playerContext{position:fixed;width:180px;z-index:40;color:white;padding:0 22px 15px;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_commamd04.tga') top/100% 62px no-repeat,url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_commamd03.tga') bottom/100% 60px no-repeat,url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_commamd02.tga') center/100% 24px repeat-y,url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_back.jpg');font:12px Arial}
#playerContext h3{color:#00ff00;text-align:center;font:bold 12px Arial;margin:20px 0 24px}#playerContext button{display:block;width:100%;height:29px;padding:0;border:0;border-radius:0;border-bottom:2px solid #555;background:none;color:#fff;font:12px Arial;position:relative}#playerContext button:hover{color:#ff0}#playerContext button:hover:before{content:'▶';position:absolute;left:0}#playerContext button:hover:after{content:'◀';position:absolute;right:0}
:is(#tradeInvite,#tradeFinal){position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:45;padding:25px;border:3px ridge #999;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_back.jpg');color:white;text-align:center}
#classicTrade{--iv:calc((100vh - var(--hud-height))/429);position:fixed;right:calc(var(--u)*190);top:0;width:calc(var(--u)*190);height:calc(var(--iv)*429);z-index:9;color:#ddd;font:clamp(9px,.75vw,13px) Arial;background:#101010}
#classicTrade .invBack,#classicTrade .invTop,#classicTrade .invLeft,#classicTrade .invRight,#classicTrade .invBottom{position:absolute;pointer-events:none;background-size:100% 100%}#classicTrade .invTop{background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_back01.tga')}#classicTrade h2{position:absolute;top:calc(var(--iv)*12);left:0;right:0;text-align:center;margin:0;font-size:inherit}
.tradeName{position:absolute;left:calc(var(--u)*11);width:calc(var(--u)*171);height:calc(var(--iv)*26);background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_Account_title.tga') center/100% 100%;display:flex;align-items:center;padding-left:10px;box-sizing:border-box}.otherName{top:calc(var(--iv)*37)}.ownName{top:calc(var(--iv)*243)}
.tradeGrid{position:absolute;left:calc(var(--u)*16);width:calc(var(--u)*160);height:calc(var(--iv)*80);background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga') 0 0/calc(var(--u)*20) calc(var(--iv)*20);border:1px ridge #999}.otherGrid{top:calc(var(--iv)*68)}.ownGrid{top:calc(var(--iv)*274)}
#classicTrade .invItem{position:absolute;left:calc(var(--u)*20*var(--x));top:calc(var(--iv)*20*var(--y));width:calc(var(--u)*20*var(--w));height:calc(var(--iv)*20*var(--h));padding:0;border:0;border-radius:0;background:rgba(77,128,128,.6) url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga') 0 0/calc(var(--u)*20) calc(var(--iv)*20)}#classicTrade .invItem img{width:100%;height:100%;object-fit:contain}#classicTrade .rotating img{visibility:hidden}
.tradeMoney{position:absolute;left:calc(var(--u)*11);width:calc(var(--u)*170);height:calc(var(--iv)*26);background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_money.tga') center/100% 100%;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;box-sizing:border-box;color:#ffe087}.otherMoney{top:calc(var(--iv)*150)}.ownMoney{top:calc(var(--iv)*356)}.tradeMoney input{width:70%;background:transparent;border:0;color:#ffe087;font:inherit;text-align:right;padding:0}
.tradeWarning{position:absolute;left:8%;right:8%;top:calc(var(--iv)*185);margin:0;color:#c4aa6c;font-size:inherit;line-height:1.7;text-align:center}.tradeAccept{position:absolute;left:calc(var(--u)*144);top:calc(var(--iv)*390);width:calc(var(--u)*30);height:calc(var(--iv)*29);padding:0;border:0;border-radius:0;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_Bt_accept.tga') top/100% 200%}.tradeAccept.ready{filter:brightness(1.6);background-position:bottom}#classicTrade[hidden],#playerContext[hidden],:is(#tradeInvite,#tradeFinal)[hidden]{display:none}
/* Native invitation: message-box frame and original OK / Cancel sprite buttons. */
:is(#tradeInvite,#tradeFinal){--mu:clamp(1px,.15625vw,2.5px);width:calc(var(--mu)*230);height:calc(var(--mu)*90);padding:0;border:0;top:45%;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_middle.tga') center/100% calc(var(--mu)*20) repeat-y,url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_back.jpg');font:clamp(10px,.8vw,14px) Arial;box-sizing:border-box}
:is(#tradeInvite,#tradeFinal) .messageTop,:is(#tradeInvite,#tradeFinal) .messageBottom{position:absolute;left:0;right:0;height:calc(var(--mu)*40);pointer-events:none;background-size:100% 100%}:is(#tradeInvite,#tradeFinal) .messageTop{top:0;background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_top.tga')}:is(#tradeInvite,#tradeFinal) .messageBottom{bottom:0;background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_bottom.tga')}
:is(#tradeInvite,#tradeFinal) p{position:absolute;left:10%;right:10%;top:calc(var(--mu)*25);margin:0;line-height:1.7;text-align:center}
#classicTrade:after{content:'';position:absolute;left:calc(var(--u)*1);top:calc(var(--iv)*220);width:calc(var(--u)*188);height:calc(var(--iv)*21);pointer-events:none;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_myquest_Line.tga') center/100% 100%}
/* Sprite controls must keep their image when generic button:hover sets background. */
:is(#classicInventory,#classicTrade,#classicMerchant,#classicCommerce,#classicQuests) .invExit,
:is(#classicInventory,#classicTrade,#classicMerchant,#classicCommerce,#classicQuests) .invExit:hover,
:is(#classicInventory,#classicTrade,#classicMerchant,#classicCommerce,#classicQuests) .invExit:focus-visible{background:transparent url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_exit_00.tga') left top/100% 200% no-repeat;border:0;border-radius:0;box-shadow:none;filter:none;outline:0}
:is(#classicInventory,#classicTrade,#classicMerchant,#classicCommerce,#classicQuests) .invExit:hover,
:is(#classicInventory,#classicTrade,#classicMerchant,#classicCommerce,#classicQuests) .invExit:active{background-position-y:100%}
:is(#classicInventory,#classicTrade,#classicMerchant,#classicCommerce,#classicQuests) .invTopClose,
:is(#classicInventory,#classicTrade,#classicMerchant,#classicCommerce,#classicQuests) .invTopClose:hover{background:transparent;border:0;box-shadow:none;filter:none;outline:0}
#classicTrade .tradeAccept,#classicTrade .tradeAccept:hover{background:transparent url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_Bt_accept.tga') left top/100% 200% no-repeat;border:0;box-shadow:none;filter:none;outline:0}
#classicTrade .tradeAccept:hover,#classicTrade .tradeAccept.ready{background-position-y:100%}

#playerContext button:hover:before{content:'';width:12px;height:14px;top:7px;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_arrow(L).tga') center/100% 100%}#playerContext button:hover:after{content:'';width:12px;height:14px;top:7px;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_arrow(R).tga') center/100% 100%}
/* Keep occupied-cell artwork identical to the bag, including while hovering. */
#classicTrade .invItem,#classicTrade .invItem:hover,#classicTrade .invItem:focus-visible{background-color:rgba(77,128,128,.6)!important;background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga');background-position:0 0;background-size:calc(var(--u)*20) calc(var(--iv)*20);background-repeat:repeat;outline:0!important;box-shadow:none;border:0}


/* OK and Cancel are 54 x 90 atlases: three 54 x 30 frames. */
:is(#tradeInvite,#tradeFinal) button{position:absolute;bottom:calc(var(--mu)*10);width:calc(var(--mu)*54);height:calc(var(--mu)*30);padding:0;border:0;border-radius:0;box-shadow:none;filter:none;outline:0;background-color:transparent;background-repeat:no-repeat;background-size:100% 300%;background-position:0 0;overflow:hidden}
:is(#tradeInvite,#tradeFinal) button:first-of-type{left:calc(var(--mu)*32);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_button_ok.tga')}
:is(#tradeInvite,#tradeFinal) button:last-of-type{right:calc(var(--mu)*28);background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_button_cancel.tga')}
:is(#tradeInvite,#tradeFinal) button:hover,:is(#tradeInvite,#tradeFinal) button:focus-visible{background-color:transparent;background-repeat:no-repeat;background-size:100% 300%;background-position:0 50%;box-shadow:none;filter:none}
:is(#tradeInvite,#tradeFinal) button:active{background-position:0 100%}
/* Match the client frame's transparent margins; stretch its stone backing once. */
:is(#tradeInvite,#tradeFinal){background:none;isolation:isolate}
:is(#tradeInvite,#tradeFinal)::before{content:'';position:absolute;left:0;top:calc(var(--mu)*2);right:calc(var(--mu)*8);bottom:calc(var(--mu)*8);z-index:-2;pointer-events:none;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_back.jpg') center/100% 100% no-repeat}
:is(#tradeInvite,#tradeFinal)::after{content:'';position:absolute;left:0;right:0;top:calc(var(--mu)*40);bottom:calc(var(--mu)*40);z-index:-1;pointer-events:none;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_middle.tga') top/100% calc(var(--mu)*15) repeat-y}
:is(#tradeInvite,#tradeFinal) .messageTop,:is(#tradeInvite,#tradeFinal) .messageBottom{background-repeat:no-repeat}

/* Partner's upper circle is a live indicator; only the lower circle is clickable. */
#classicTrade .tradeOtherAccept{position:absolute;left:calc(var(--u)*146);top:calc(var(--iv)*186);width:calc(var(--u)*30);height:calc(var(--iv)*29);padding:0;border:0;border-radius:0;background:transparent url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_Bt_accept.tga') left top/100% 200% no-repeat;opacity:1;filter:none;box-shadow:none;cursor:default}
#classicTrade .tradeOtherAccept.ready{background-position-y:100%}
#classicTrade .tradeWarning{right:25%;text-align:left}
#classicTrade .invItem,#classicTrade .invItem:hover,#classicTrade .invItem:focus-visible{background-color:rgba(77,128,128,.6)!important;background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga')!important;background-size:calc(var(--u)*20) calc(var(--iv)*20)!important;background-repeat:repeat!important}
/* Original circle sprite: normal first frame, pressed second frame. */
#classicTrade .tradeAccept,#classicTrade .tradeAccept:hover,#classicTrade .tradeOtherAccept{background-position-y:0;opacity:1}
#classicTrade .tradeAccept.ready,#classicTrade .tradeAccept.ready:hover,#classicTrade .tradeOtherAccept.ready{background-position-y:100%}
#classicTrade .tradeGrid{overflow:hidden}
#classicTrade .tradeDrop{pointer-events:none;z-index:5;border:1px solid #406eac;background:rgba(23,65,123,.6) url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_item_box.tga') 0 0/calc(var(--u)*20) calc(var(--iv)*20) repeat}
#classicTrade .tradeDrop[data-valid=false]{border-color:#df6666;background-color:rgba(195,58,58,.5)}
#classicTrade .invItem.picked{background-color:transparent!important;pointer-events:none}#classicTrade .invItem.picked img{visibility:hidden}
/* Native stone startup screen, letterboxed like the original 800 x 600 client. */
#loading{position:fixed;inset:0;z-index:100;background:#020304;display:block;overflow:hidden;color:#d5b45e;font:13px Arial}
.loadingBoot{position:absolute;inset:0;display:grid;place-items:center}
.loadingArtwork{position:relative;width:min(100vw,150vh);height:min(100vh,66.666667vw)}
#loading .loadingArtwork img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;image-rendering:auto}
.loadingProgress{position:absolute;left:22.4%;right:22.5%;top:85.7422%;height:1.5625%;overflow:hidden;border-radius:2px}
.loadingProgress i{position:relative;display:block;height:100%;width:0;transition:width .12s linear;background:linear-gradient(180deg,#91383d 0%,#681923 32%,#480c17 65%,#29040b 100%);border-top:1px solid #a34b52;box-shadow:inset 0 1px 0 #d5707928,inset 0 -1px 2px #160105;box-sizing:border-box}
.loadingStatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(min-aspect-ratio:3/2){.loadingArtwork{width:100vw;height:100vh}#loading .loadingArtwork img{object-fit:fill}}

#loading[data-mode="boot"] .loadingMap,#loading[data-mode="map"] .loadingBoot{display:none}
.loadingArtwork .loadingStatus{left:22.4%;top:79.7%;width:55.1%;height:auto;clip-path:none;white-space:normal;text-align:center;background:#080706eb;padding:.25em 0;color:#d8bd98;font-size:clamp(10px,1vw,16px)}
.loadingMap{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:85.333333% 14.666667%}
#loading .loadingMap>img{display:block;width:100%;height:100%;object-fit:fill}
.loadingMap .loadingProgress{left:3%;right:55%;top:auto;bottom:3%;height:1%}
.loadingMap .loadingStatus{left:3%;bottom:5%;width:auto;height:auto;clip-path:none}

#assetDownload{position:fixed;top:39px;right:10px;z-index:80;display:flex;align-items:center;gap:6px;color:#c2cbd5;font:11px Arial;text-shadow:0 1px 3px #000;pointer-events:none}
#assetDownload[hidden]{display:none}
#assetDownload i{width:10px;height:10px;border:2px solid #8b9eb13d;border-top-color:#9fb9d6;border-radius:50%;animation:assetSpin .8s linear infinite}
#assetDownload.failed i{animation:none;border-color:#aa793e}
@keyframes assetSpin{to{transform:rotate(360deg)}}

.playing .potionSlot{position:absolute;left:calc(var(--u) * (1 + var(--potion-slot,0) * 40));top:calc(var(--v) * 2);width:calc(var(--u) * 38);height:calc(var(--v) * 37);border:0;background:transparent;padding:0;border-radius:0;}
.playing .potionSlot:hover{background:#b7a56322;}
.playing .potionSlot .potionArt{position:absolute;left:calc(var(--u)*9);top:calc(var(--v)*12);width:calc(var(--u)*20);height:calc(var(--v)*20);object-fit:contain;pointer-events:none;}

/* Original four-entry window menu, anchored above the corner HUD button. */
.playing #windowMenu{position:fixed;left:calc(var(--u)*528);bottom:calc(var(--v)*50);width:calc(var(--u)*112);height:calc(var(--v)*105);padding:calc(var(--v)*15) 0 calc(var(--v)*10);box-sizing:border-box;z-index:32;background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_back.jpg') repeat;background-size:calc(var(--u)*256) calc(var(--v)*512);}
#windowMenu .menuTop,#windowMenu .menuBottom{position:absolute;left:0;width:100%;height:calc(var(--v)*45);pointer-events:none;background-size:100% 100%;}
#windowMenu .menuTop{top:0;background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_commamd01.tga');}
#windowMenu .menuBottom{bottom:0;background-image:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_commamd03.tga');}
.playing #windowMenu button{position:relative;display:block;width:100%;height:calc(var(--v)*20);margin:0;padding:0;border:0;border-radius:0;background:transparent;color:white;font:calc(var(--v)*5) Arial,sans-serif;box-shadow:none;}
#windowMenu button:not(:last-child):after{content:'';position:absolute;bottom:0;left:13.4%;width:73.2%;height:calc(var(--v)*1);background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_commamd_Line.jpg') center/100% 100%;}
.playing #windowMenu button:hover,.playing #windowMenu button:focus-visible{color:#ffff00;background:transparent;}
#windowMenu button:hover:before,#windowMenu button:focus-visible:before{content:'';position:absolute;left:14.3%;top:calc(var(--v)*6);width:calc(var(--u)*6);height:calc(var(--v)*9);background:url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_arrow(L).tga') center/100% 100%;}
.playing #windowMenu button:active{color:#d6a94a;transform:none;}
.playing #menuToggle[aria-expanded=true]{background-position-y:66.666%;}
.playing #menuToggle:active{background-position-y:66.666%;}
#gameHelp{position:fixed;right:calc(var(--u)*5);bottom:calc(var(--v)*55);width:min(460px,90vw);max-height:75vh;overflow:auto;z-index:35;padding:22px;color:#eee;border:3px ridge #8b8170;background:#191919 url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_back.jpg');font:13px Arial,sans-serif;box-shadow:0 5px 20px #000;}
#gameHelp h2{margin:0 0 18px;color:#e5c26c;text-align:center;font-size:16px;}
#gameHelp .helpClose{position:absolute;right:8px;top:6px;padding:2px 8px;color:#e5c26c;background:#252525;border:1px solid #777;}
#gameHelp dt{color:#e5c26c;margin-top:15px;font-weight:bold;}#gameHelp dd{margin:5px 0;line-height:1.5;}

/* Slot footprint owns item size across bag, equipment, merchants, trade and storage. */
:is(#classicInventory,#classicMerchant) [data-group] img{transform:none;}.invItem img{padding:0;object-fit:contain;}

.tipLine.harmony{color:#e9cc59}.tipLine.purple{color:#ce97ef}
.invTooltip .marketMini{margin:8px -5px -5px;padding:8px;border-top:1px solid #776d4c;background:linear-gradient(#171711,#080909)}.marketMini>div{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;color:#d8bc64}.marketMini>div span{font-weight:bold;letter-spacing:1px}.marketMini>div strong{color:#fff}.marketMini>div small{grid-column:2;text-align:right}.marketMini svg{display:block;width:100%;height:58px;margin:5px 0;background:#070908;border:1px solid #34372f}.marketMini polyline{fill:none;stroke:#e1bd50;stroke-width:2;vector-effect:non-scaling-stroke}.marketMini p{margin:3px 0 0;color:#aaa;text-align:center}.marketMini .up{color:#59db83}.marketMini .down{color:#f16c6c}
#playerContext {max-height:calc(100vh - 12px);overflow-y:auto;box-sizing:border-box;overscroll-behavior:contain}
#playerContext.withStaff {width:340px}
#playerContext .staffContext {display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;margin-top:10px}
#playerContext .staffContext:empty {display:none}
#playerContext .staffContext h4 {grid-column:1/-1;color:#e9c678;margin:6px 0;text-align:center}
#playerContext .staffContext button {font-size:11px;min-height:29px;height:auto;padding:5px 2px;line-height:14px;color:#e8d8af}
.staffQuickDialog {z-index:46;width:min(460px,calc(100vw - 24px));box-sizing:border-box;padding:32px;max-height:calc(100vh - 24px);overflow:auto;color:#eee}
.staffQuickDialog h2 {font-size:17px;color:#e9c678}
.staffQuickDialog p {line-height:1.5}
.staffQuickDialog label {display:block;margin:18px 0}
.staffQuickDialog input {display:block;box-sizing:border-box;width:100%;padding:8px;margin-top:6px;background:#111;color:#fff;border:1px solid #777}
.staffQuickDialog button {margin:5px;min-width:110px;min-height:30px}

#character .statQuantityRow{position:absolute;left:calc(var(--u)*14);right:calc(var(--u)*14);top:calc(var(--cv)*373);height:calc(var(--cv)*17);display:flex;align-items:center;gap:calc(var(--u)*4);font:inherit;color:#dfc06c}
#character .statQuantityRow label{flex:1;white-space:nowrap}
#character #statQuantity{width:calc(var(--u)*48);min-width:0;height:100%;padding:0 3px;background:#080808;border:1px solid #777;color:#ffed96;font:inherit;text-align:center;border-radius:0}
#character #statQuantityAll{width:calc(var(--u)*26);height:100%;padding:0;border:2px ridge #777;border-radius:0;background:#222 url('https://servidor.muworld.net/api/texture?dir=Interface&file=newui_msgbox_back.jpg') center/cover;color:#dfc06c;font:inherit}

#launchChoice{position:fixed;inset:0;z-index:110;display:grid;place-items:center;background:#020304 url('/assets/loading-muworld.png') center/cover no-repeat;color:#e6d4ac;font-family:Arial,sans-serif}
#launchChoice[hidden]{display:none}.launchPanel{width:min(560px,calc(100vw - 32px));padding:34px 38px;background:linear-gradient(180deg,#17130feb,#070604f2);border:1px solid #9d8159;box-shadow:0 18px 60px #000,inset 0 0 35px #8b663018;text-align:center}
.launchPanel h1{margin:0 0 8px;color:#e0bc75;font:40px Georgia,serif;letter-spacing:1px;text-shadow:0 2px 6px #000}.launchPanel>p{margin:0 0 25px;color:#b8aa8e;font-size:13px}.launchOptions{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.launchOption{display:flex;min-height:112px;flex-direction:column;justify-content:center;gap:8px;padding:18px 15px;border:1px solid #77654a;background:linear-gradient(#292116,#100d09);color:#ead8af;text-decoration:none;box-shadow:inset 0 0 20px #c99d3510}.launchOption:hover,.launchOption:focus{border-color:#e0b45d;background:linear-gradient(#3b2e19,#171108);outline:none}
.launchOption strong{color:#f0ca7c;font:19px Georgia,serif}.launchOption span{color:#aa9d83;font-size:11px;line-height:1.45}.launchError{min-height:16px;margin:18px 0 0!important;color:#d88f7b!important}@media(max-width:560px){.launchOptions{grid-template-columns:1fr}.launchPanel{padding:25px 20px}.launchPanel h1{font-size:32px}.launchOption{min-height:90px}}

#world.cameraOrbit{cursor:grabbing!important}