#classicUi { position: fixed; inset: 0; z-index: 8; pointer-events: none; font-family: Tahoma, Arial, sans-serif; color: #e8e8e8; }
#classicUi [hidden] { display: none !important; }
#classicUi button { font-family: Tahoma, Arial, sans-serif; letter-spacing: 0; cursor: pointer; }
#classicUi button:disabled { cursor: default; }
.classic-slide-help { position: absolute; z-index: 5; left: 0; top: 0; width: 640px; height: 14px; overflow: hidden; transform: scale(var(--classic-rx), var(--classic-ry)); transform-origin: top left; background: rgba(0, 0, 0, .7); border-bottom: 1px solid rgba(0, 0, 0, .8); pointer-events: none; font: 400 9px/10px Tahoma, Arial, sans-serif; white-space: nowrap; }
.classic-slide-help.notice { font-weight: 700; }
.classic-slide-help > span { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; }
#inventoryPanel, #inventoryPanel *, #storagePanel, #storagePanel *, #personalStore, #personalStore *, #classicUi .classic-character, #classicUi .classic-character *, #classicUi .classic-character button:disabled { cursor: url(assets/cursor/mano.png) 2 2, default; }
#inventoryPanel:active, #inventoryPanel:active *, #storagePanel:active, #storagePanel:active *, #personalStore:active, #personalStore:active *, #classicUi .classic-character:active, #classicUi .classic-character:active * { cursor: url(assets/cursor/push.png) 2 2, default; }
.classic-location { position: absolute; left: 0; top: 0; width: calc(194px * var(--classic-rx)); height: calc(25px * var(--classic-ry)); background-image: var(--classic-locationA), var(--classic-locationB), var(--classic-locationC); background-position: left top, calc(22px * var(--classic-rx)) top, calc(102px * var(--classic-rx)) top; background-size: calc(22px * var(--classic-rx)) calc(25px * var(--classic-ry)), calc(80px * var(--classic-rx)) calc(25px * var(--classic-ry)), calc(73px * var(--classic-rx)) calc(20px * var(--classic-ry)); background-repeat: no-repeat; font-size: calc(6.8px * var(--classic-ry)); text-shadow: 0 1px 1px #000; pointer-events: auto; }
.classic-location::before, .classic-location::after { content: ''; position: absolute; top: 0; height: calc(20px * var(--classic-ry)); background-image: var(--classic-locationC); background-size: calc(73px * var(--classic-rx)) calc(20px * var(--classic-ry)); background-repeat: no-repeat; pointer-events: none; }
.classic-location::before { left: calc(157px * var(--classic-rx)); width: calc(18px * var(--classic-rx)); background-position: calc(-36px * var(--classic-rx)) top; }
.classic-location::after { left: calc(175px * var(--classic-rx)); width: calc(19px * var(--classic-rx)); background-position: calc(-54px * var(--classic-rx)) top; }
.classic-location [data-location] { position: absolute; left: calc(10px * var(--classic-rx)); top: calc(2px * var(--classic-ry)); width: calc(100px * var(--classic-rx)); line-height: calc(11px * var(--classic-ry)); text-align: center; white-space: nowrap; }
.classic-location button { position: absolute; z-index: 1; top: 0; width: calc(18px * var(--classic-rx)); height: calc(13px * var(--classic-ry)); padding: 0; border: 0; background-color: transparent; background-position: center top; background-size: 100% 200%; background-repeat: no-repeat; }
.classic-location-setup { left: calc(121px * var(--classic-rx)); background-image: var(--classic-locationSetup); }
.classic-location-start { left: calc(139px * var(--classic-rx)); background-image: var(--classic-locationStart); }
.classic-location .classic-location-setup, .classic-location .classic-location-start { background-size: 100% calc(40px * var(--classic-ry)); }
.classic-location .classic-location-setup:hover, .classic-location .classic-location-start:hover { background-position: center calc(-13px * var(--classic-ry)); }
.classic-location .classic-location-setup:active, .classic-location .classic-location-start:active { background-position: center calc(-26px * var(--classic-ry)); }
.classic-location .classic-location-start.running { background-image: var(--classic-locationStop); }
.classic-location .classic-location-map { left: calc(157px * var(--classic-rx)); background: url(assets/interface/native/panels/MacroUI_MapButton.png) center top / 100% calc(17px * var(--classic-ry)) no-repeat; }
.classic-location .classic-location-map:active { filter: brightness(.78); }
.classic-special-menu { position: absolute; z-index: 4; left: 50%; top: calc(71px * var(--classic-ry)); width: calc(220px * var(--classic-rx)); height: calc(155px * var(--classic-ry)); transform: translateX(-50%); background: #171719 var(--classic-specialMenuBg) center / 100% 100% no-repeat; pointer-events: auto; text-align: center; }
.classic-special-menu h2 { position: absolute; left: 0; top: calc(8px * var(--classic-ry)); width: 100%; margin: 0; color: #eac16a; font: bold calc(7.5px * var(--classic-ry)) / calc(11px * var(--classic-ry)) Georgia, serif; }
.classic-special-finances { position: absolute; left: 0; top: calc(26px * var(--classic-ry)); width: 100%; font-size: calc(6.8px * var(--classic-ry)); line-height: calc(9px * var(--classic-ry)); }
.classic-special-balances { position: absolute; left: 0; top: calc(38px * var(--classic-ry)); width: 100%; color: #e4bf69; font-size: calc(7.3px * var(--classic-ry)); font-weight: bold; line-height: calc(10px * var(--classic-ry)); white-space: nowrap; }
.classic-special-actions { position: absolute; left: calc(20px * var(--classic-rx)); top: calc(63px * var(--classic-ry)); display: grid; grid-template-columns: repeat(7, calc(21px * var(--classic-rx))); grid-auto-rows: calc(28px * var(--classic-ry)); column-gap: calc(5px * var(--classic-rx)); row-gap: calc(8px * var(--classic-ry)); }
.classic-special-actions button { width: 100%; height: 100%; padding: 0; border: 0; background: transparent var(--special-icon) center / 100% 100% no-repeat; }
.classic-special-actions button:hover { filter: brightness(1.25); }
.classic-special-actions button:active { filter: brightness(.7); }
.classic-special-actions button:focus-visible { outline: 1px solid #e2b13b; outline-offset: 1px; }
.classic-event { position: absolute; top: calc(1.066667px * var(--classic-ry)); left: calc(291.2px * var(--classic-rx)); width: calc(68px * var(--classic-rx)); height: calc(13.866667px * var(--classic-ry)); background: var(--classic-eventBar) center / 100% 100% no-repeat; color: #ffbd19; font-size: calc(5px * var(--classic-ry)); line-height: calc(13.866667px * var(--classic-ry)); text-align: center; }
.classic-system-log { position: absolute; left: calc(2.8px * var(--classic-rx)); bottom: calc(331.2px * var(--classic-ry)); width: calc(220px * var(--classic-rx)); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: max(0px, calc(14.933px * var(--classic-ry) - 14px)); color: #6496ff; font: 400 11.6px/14px Tahoma, Arial, sans-serif; letter-spacing: .5px; text-shadow: none; pointer-events: none; }
.classic-system-log > div { box-sizing: border-box; width: max-content; max-width: 100%; padding: 0; background: rgba(0, 0, 0, .588); overflow-wrap: anywhere; }
.classic-system-log .native-system-text { display: block; font-size: 0; line-height: 0; }
.classic-system-log .native-system-text canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.classic-text-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.classic-server-notices { position: absolute; z-index: 80; left: 50%; top: calc(300px * var(--classic-ry)); transform: translateX(-50%); width: 90%; color: #ffc850; font: 700 12px/14px Tahoma, Arial, sans-serif; letter-spacing: 0; text-align: center; text-shadow: none; pointer-events: none; }
.classic-server-notices > div { min-height: calc(13px * var(--classic-ry)); overflow-wrap: anywhere; }
.classic-server-notices span { color: rgba(255, 200, 80, var(--notice-alpha, 1)); background: rgba(0, 0, 0, .502); box-decoration-break: clone; white-space: break-spaces; }
.classic-server-notices .native-notice { display: inline-block; vertical-align: top; font-size: 0; line-height: 0; }
.classic-server-notices .native-notice canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; opacity: var(--notice-alpha, 1); }
.classic-clock { position: absolute; left: calc(2px * var(--classic-rx)); bottom: calc(55px * var(--classic-ry)); width: calc(86px * var(--classic-rx)); height: calc(38px * var(--classic-ry)); box-sizing: border-box; background: rgba(0, 0, 0, .75); color: #ffbd19; font-size: calc(5px * var(--classic-ry)); }
.classic-clock div { position: absolute; left: calc(3px * var(--classic-rx)); top: calc(4px * var(--classic-ry)); width: calc(80px * var(--classic-rx)); line-height: calc(7px * var(--classic-ry)); white-space: pre; }
.classic-clock div + div { top: calc(26px * var(--classic-ry)); }
.classic-clock, .classic-event { font-family: Arial, sans-serif; }
.classic-clock b { font-weight: 400; }
.classic-clock span { position: absolute; left: calc(50px * var(--classic-rx)); color: #fff; }
.classic-fps { position: absolute; top: 0; right: 0; width: max(72px, calc(50px * var(--classic-rx))); height: max(20px, calc(16px * var(--classic-ry))); display: flex; align-items: center; justify-content: flex-start; padding-left: max(10px, calc(10px * var(--classic-rx))); box-sizing: border-box; background: rgba(0, 0, 0, .75); color: #ffc850; font: 400 11px/14px Tahoma, Arial, sans-serif; letter-spacing: 0; white-space: nowrap; pointer-events: none; }
.classic-hud-actions { position: absolute; left: calc(489px * var(--classic-rx)); bottom: calc(10px * var(--classic-ry)); display: flex; height: calc(41px * var(--classic-ry)); pointer-events: auto; }
.classic-hud-actions button { position: relative; width: calc(30px * var(--classic-rx)); height: 100%; padding: 0; border: 0; background-position: center top; background-size: 100% 400%; background-repeat: no-repeat; }
.classic-hud-actions button:nth-child(1) { background-image: var(--classic-inventoryButton); }
.classic-hud-actions button:nth-child(2) { background-image: var(--classic-characterButton); }
.classic-hud-actions button:nth-child(3) { background-image: var(--classic-friendButton); }
.classic-hud-actions button:nth-child(4) { background-image: var(--classic-partyButton); }
.classic-hud-actions button:nth-child(5) { background-image: var(--classic-menuButton); }
.classic-hud-actions button:hover { background-position: center 33.333%; }
.classic-hud-actions button:active { background-position: center 66.667%; }
#inventoryToggle, #salir-btn { display: none; }
#skillHud { left: calc(385px * var(--classic-rx)); bottom: calc(11px * var(--classic-ry)); width: 32px; height: 38px; transform: scale(var(--classic-rx), var(--classic-ry)); transform-origin: bottom left; }
#skillHud[data-open="true"] { z-index: 9; }
.skill-bar { position: absolute; left: -163px; top: 0; display: grid; grid-template-columns: repeat(5, 32px); height: 38px; }
.skill-empty { width: 32px; height: 38px; pointer-events: none; }
#consumableHud { position: fixed; left: 0; bottom: calc(11px * var(--classic-ry)); display: grid; grid-template-columns: repeat(4, 38px); width: 152px; height: 38px; z-index: 7; transform: scale(var(--classic-rx), var(--classic-ry)); transform-origin: bottom left; }
.consumable-slot { position: relative; width: 38px; height: 38px; }
.consumable-slot .inventory-item { position: absolute; left: 10px; top: 12px; width: 20px; height: 20px; border: 0; padding: 0; background: transparent; }
.consumable-count { position: absolute; right: 2px; bottom: 0; color: #fff0b2; font: 700 9px/1 Arial, sans-serif; text-shadow: 0 1px 2px #000; pointer-events: none; }
.classic-panel { position: absolute; right: 0; top: 0; width: 190px; height: 433px; transform: scale(var(--classic-rx), var(--classic-ry)); transform-origin: top right; pointer-events: auto; background-color: #111; background-image: var(--classic-header), var(--classic-bottom), var(--classic-left), var(--classic-right), var(--classic-surface); background-position: top center, bottom center, left top 64px, right top 64px, center top 64px; background-size: 190px 64px, 190px 45px, 21px calc(100% - 109px), 21px calc(100% - 109px), 148px calc(100% - 109px); background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat; box-shadow: 0 8px 24px #000b; font-size: 6px; }
.classic-character { height: 429px; background-position: top center, bottom center, left top 64px, right top 64px, center top; background-size: 190px 64px, 190px 45px, 21px 320px, 21px 320px, 190px 429px; background-repeat: no-repeat; }
#mundo:has(#inventoryPanel:not([hidden])):has(.classic-character:not([hidden])) #inventoryPanel { right: calc(190px * var(--classic-rx)); }
.classic-party { background-image: var(--classic-partyHeader), var(--classic-bottom), var(--classic-left), var(--classic-right), var(--classic-surface); }
.classic-panel h2 { position: absolute; top: 8px; left: 20px; width: 150px; margin: 0; color: #e4e4e4; text-align: center; font-size: 6px; line-height: 11px; }
.classic-close { position: absolute; right: 7px; top: 5px; width: 21px; height: 20px; border: 0; padding: 0; background: var(--classic-close) center top / 21px 42px no-repeat; }
.classic-close:hover { background-position: center bottom; }
.classic-helper .classic-close { right: 8px; top: 6px; width: 18px; height: 18px; background: none; }
.classic-character .classic-close { right: 8px; top: 7px; width: 18px; height: 18px; background: none; }
.classic-footer-exit { position: absolute; left: 14px; bottom: 10px; width: 38px; height: 29px; border: 0; padding: 0; background: var(--classic-close) center top / 38px 58px no-repeat; }
.classic-footer-exit:hover { background-position: center bottom; }
.classic-class { position: absolute; top: 26px; width: 100%; margin: 0; text-align: center; font-size: 6px; }
.classic-character-summary { position: absolute; top: 48px; left: 12px; width: 165px; height: 71px; box-sizing: border-box; background-color: rgba(0, 0, 0, .3); background-image: var(--classic-tableTopLeft), var(--classic-tableTopRight), var(--classic-tableBottomLeft), var(--classic-tableBottomRight), var(--classic-tableTop), var(--classic-tableBottom), var(--classic-tableLeft), var(--classic-tableRight); background-position: left top, right top, left bottom, right bottom, left 14px top, left 14px bottom, left top 14px, right top 14px; background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, calc(100% - 28px) 14px, calc(100% - 28px) 14px, 14px calc(100% - 28px), 14px calc(100% - 28px); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.classic-character-summary::before { content: ''; position: absolute; left: 2px; top: 12px; width: 155px; height: 14px; background: var(--classic-tableBottom) left top / 1px 14px repeat-x; pointer-events: none; }
.classic-character-summary > b { position: absolute; top: 10px; z-index: 1; font-size: 6px; white-space: nowrap; }
.classic-character-summary > b:first-child { left: 6px; color: #e6e600; }
.classic-character-summary > b:nth-child(2) { left: 98px; color: #ff8a00; }
.classic-character-summary p { position: absolute; left: 6px; margin: 0; color: #f0f0f0; font-size: 5px; line-height: 9px; white-space: nowrap; }
.classic-character-summary p:nth-of-type(1) { top: 27px; }
.classic-character-summary p:nth-of-type(2) { top: 40px; color: #4cc5fe; }
.classic-character-summary p:nth-of-type(3) { top: 53px; color: #4cc5fe; }
.classic-character-stats { position: absolute; inset: 0; }
.classic-stat-line { position: absolute; left: 11px; width: 170px; height: 21px; background: var(--classic-statBar) left top / 170px 21px no-repeat; color: #e6e600; font-size: 6px; text-align: center; }
.classic-stat-line:nth-of-type(1) { top: 120px; }
.classic-stat-line:nth-of-type(2) { top: 175px; }
.classic-stat-line:nth-of-type(3) { top: 240px; }
.classic-stat-line:nth-of-type(4) { top: 295px; }
.classic-stat-line:nth-of-type(5) { top: 350px; }
.classic-stat-line span { position: absolute; left: 1px; top: 4px; width: 74px; line-height: 13px; }
.classic-stat-line b { position: absolute; left: 75px; top: 4px; width: 86px; line-height: 13px; font-weight: 400; }
.classic-stat-line button { position: absolute; left: 149px; top: 2px; width: 16px; height: 15px; padding: 0; border: 0; background: var(--classic-statButton) left top / 16px 30px no-repeat; }
.classic-stat-line button:enabled:active { background-position: left bottom; }
.classic-stat-line button:disabled:not([data-eligible="true"]) { opacity: .45; }
.classic-stat-line button:focus-visible { outline: 1px solid #f8d568; outline-offset: 1px; }
.classic-character-stats p { position: absolute; left: 20px; width: 150px; margin: 0; line-height: 13px; font-size: 5px; }
.classic-character-stats p:nth-of-type(1) { top: 145px; }
.classic-character-stats p:nth-of-type(2) { top: 199px; }
.classic-character-stats p:nth-of-type(3) { top: 264px; }
.classic-character-stats p:nth-of-type(4) { top: 319px; }
.classic-character > .classic-footer-exit { left: 13px; bottom: 8px; width: 36px; background-size: 36px 58px; background-position: left top; }
.classic-character > .classic-footer-exit:hover { background-position: left top; }
.classic-character > .classic-footer-exit:active { background-position: left bottom; }
.classic-character > .classic-footer-icon { bottom: 8px; }
.classic-character > .classic-footer-quest { left: 50px; background-image: var(--classic-questButton); }
.classic-character > .classic-footer-pet { left: 87px; background-image: var(--classic-petButton); }
.classic-character > .classic-footer-master { left: 124px; background-image: var(--classic-masterButton); }
.classic-footer-icon { position: absolute; width: 36px; height: 29px; padding: 0; border: 0; background-color: transparent; background-position: left top; background-size: 36px 58px; background-repeat: no-repeat; }
.classic-footer-icon:focus-visible { outline: 1px solid #f8d568; outline-offset: 1px; }
.classic-party-text { position: absolute; left: 20px; top: 56px; width: 150px; line-height: 16px; font-size: 5px; }
.classic-minimap { position: absolute; right: calc(6px * var(--classic-rx)); bottom: calc(82px * var(--classic-ry)); width: 136px; height: 136px; transform: scale(var(--classic-rx), var(--classic-ry)); transform-origin: bottom right; pointer-events: auto; }
.classic-minimap-image { position: absolute; left: 11px; top: 11px; width: 114px; height: 114px; overflow: hidden; border-radius: 50%; background-color: #171b14; background-image: var(--classic-mapImage); background-position: center; background-size: 256px 256px; background-repeat: no-repeat; }
.classic-minimap-frame { position: absolute; inset: 3px 0 -3px; z-index: 2; background-image: var(--classic-mapAtlas); background-position: -74.8px -23.8px; background-size: 217.6px 435.2px; background-repeat: no-repeat; pointer-events: none; }
.classic-map-markers { position: absolute; inset: 0; }
.classic-map-player, .classic-map-npc, .classic-map-monster { position: absolute; display: block; transform: translate(-50%, -50%); }
.classic-map-player { z-index: 2; width: 11px; height: 11px; background: var(--classic-mapPlayer) center / contain no-repeat; }
.classic-map-npc { width: 9px; height: 9px; background: var(--classic-mapNpc) center / contain no-repeat; }
.classic-map-monster { width: 7px; height: 7px; border-radius: 46% 46% 38% 38%; background: #d91518; box-shadow: 0 0 1px 1px #710708; }
.classic-map-monster::before { content: ''; position: absolute; top: 2px; left: 1px; width: 1px; height: 1px; background: #290505; box-shadow: 3px 0 #290505; }
.classic-minimap button { position: absolute; z-index: 3; width: 27px; height: 27px; padding: 0; border: 0; background-color: transparent; background-image: var(--classic-mapAtlas); background-position: 0 var(--classic-map-control-row); background-size: 216px 432px; background-repeat: no-repeat; }
.classic-minimap button:hover { background-position: -27px var(--classic-map-control-row); }
.classic-minimap button:active { background-position: -54px var(--classic-map-control-row); }
.classic-minimap button:disabled { pointer-events: none; }
.classic-map-minus { --classic-map-control-row: -189px; left: 13.5px; bottom: 5.5px; }
.classic-map-plus { --classic-map-control-row: -162px; right: 8.5px; bottom: 5.5px; }
.classic-map-helper { --classic-map-control-row: -297px; left: 13.5px; top: 5.5px; }
.classic-map-3d { --classic-map-control-row: -270px; right: 8.5px; top: 5.5px; }
.classic-warp { position: absolute; z-index: 5; top: 0; left: 0; width: calc(170px * var(--classic-rx)); height: calc(309px * var(--classic-ry)); box-sizing: border-box; border-right: 2px solid #252525; border-bottom: 1px solid #252525; background: rgba(0, 0, 0, .8); pointer-events: auto; color: #fff; font: 12px/15px Tahoma, Arial, sans-serif; }
#classicUi:has(.classic-warp:not([hidden])) .classic-location { z-index: 6; }
#classicUi:has(.classic-warp:not([hidden])) .classic-location::before, #classicUi:has(.classic-warp:not([hidden])) .classic-location::after { display: none; }
#classicUi:has(.classic-warp:not([hidden])) .classic-location [data-location] { left: 0; width: calc(92px * var(--classic-rx)); color: #555; }
#classicUi:has(.classic-warp:not([hidden])) .classic-location-map { display: none; }
.classic-warp h2 { position: absolute; left: calc(56px * var(--classic-rx)); top: calc(5px * var(--classic-ry)); margin: 0; color: #ffcc1a; font: 700 12px/15px Tahoma, Arial, sans-serif; white-space: nowrap; }
.classic-warp-head, .classic-warp-row { display: grid; grid-template-columns: calc(40px * var(--classic-rx)) calc(40px * var(--classic-rx)) calc(48px * var(--classic-rx)) calc(24px * var(--classic-rx)); width: calc(152px * var(--classic-rx)); text-align: center; }
.classic-warp-head { position: absolute; left: 0; top: calc(24px * var(--classic-ry)); height: calc(8px * var(--classic-ry)); color: #7fb2ff; }
.classic-warp-head span, .classic-warp-row span { display: block; overflow: hidden; white-space: nowrap; }
.classic-warp-list { position: absolute; left: 0; top: calc(40px * var(--classic-ry)); width: calc(152px * var(--classic-rx)); height: calc(248px * var(--classic-ry)); overflow-y: auto; scrollbar-width: none; }
.classic-warp-list::-webkit-scrollbar { display: none; }
.classic-warp-row { height: calc(8px * var(--classic-ry)); min-height: calc(8px * var(--classic-ry)); padding: 0; border: 0; background: transparent; color: #a42711; font: 12px/15px Tahoma, Arial, sans-serif; }
.classic-warp-row[data-eligible="true"] { color: #fff; }
.classic-warp-row[data-low-level="true"] span:nth-child(3), .classic-warp-row[data-low-zen="true"] span:nth-child(4) { color: #ff331a; }
.classic-warp-row:hover:not(:disabled) { color: #ffcc1a; }
.classic-warp-row:disabled { opacity: 1; cursor: default; }
.classic-warp-scrollbar { position: absolute; left: calc(157px * var(--classic-rx)); top: calc(38px * var(--classic-ry)); width: calc(7px * var(--classic-rx)); height: calc(248px * var(--classic-ry)); background: var(--classic-warpScrollMiddle) center / 100% calc(15px * var(--classic-ry)) repeat-y; touch-action: none; }
.classic-warp-scrollbar::before, .classic-warp-scrollbar::after { content: ''; position: absolute; left: 0; width: 100%; height: calc(3px * var(--classic-ry)); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.classic-warp-scrollbar::before { top: 0; background-image: var(--classic-warpScrollUp); }
.classic-warp-scrollbar::after { bottom: 0; background-image: var(--classic-warpScrollDown); }
.classic-warp-thumb { position: absolute; left: calc(-4px * var(--classic-rx)); top: 0; width: calc(15px * var(--classic-rx)); height: calc(30px * var(--classic-ry)); background: var(--classic-warpScrollOn) center / 100% 100% no-repeat; cursor: pointer; }
.classic-warp > button { position: absolute; left: calc(2px * var(--classic-rx)); bottom: calc(7px * var(--classic-ry)); width: calc(166px * var(--classic-rx)); height: calc(8px * var(--classic-ry)); padding: 0; border: 0; background: #9a0000; color: #fff; font: 12px/15px Tahoma, Arial, sans-serif; }
.classic-friend { position: absolute; right: 0; bottom: calc(50px * var(--classic-ry)); width: 250px; height: 170px; transform: scale(var(--classic-rx), var(--classic-ry)); transform-origin: bottom right; border: 3px ridge #777; box-sizing: border-box; background: rgba(17, 15, 16, .9); box-shadow: 0 5px 15px #000b; pointer-events: auto; font-size: 5px; }
.classic-friend header { height: 18px; padding-left: 7px; background: linear-gradient(#656467, #242326); line-height: 17px; }
.classic-friend header button { float: right; width: 15px; height: 13px; margin: 2px; padding: 0; border: 2px ridge #999; background: #121113; color: #fff; line-height: 7px; }
.classic-friend-tabs { display: flex; height: 19px; border-bottom: 1px solid #8d8580; }
.classic-friend-tabs button { width: 55px; padding: 0; border: 1px solid #837e77; background: #090909; color: #ddd; font-size: 5px; }
.classic-friend-tabs button.active { background: #302b2b; }
.classic-friend-tabs label { display: flex; align-items: center; gap: 2px; padding-left: 7px; white-space: nowrap; }
.classic-friend-tabs input { width: 8px; height: 8px; margin: 0; }
.classic-friend-head { height: 14px; padding: 3px 5px; box-sizing: border-box; color: #ddd; }
.classic-friend-head span { margin-left: 58px; }
.classic-friend-list { height: 99px; border-top: 1px solid #777; background: rgba(0, 0, 0, .42); }
.classic-friend footer { display: flex; height: 14px; gap: 2px; padding: 2px; }
.classic-friend footer button { flex: 1; border: 2px ridge #737176; background: linear-gradient(#5f5e61, #252429); color: #ddd; font-size: 5px; }
#classicUi .classic-helper, #classicUi .classic-helper *, #classicUi .classic-location, #classicUi .classic-location * { cursor: url(assets/cursor/mano.png) 2 2, default; }
#classicUi .classic-helper:active, #classicUi .classic-helper:active *, #classicUi .classic-location:active, #classicUi .classic-location:active * { cursor: url(assets/cursor/push.png) 2 2, default; }
#classicUi .classic-helper, #classicUi .classic-helper button, #classicUi .classic-helper input { font-family: Tahoma, Arial, sans-serif; }
.classic-helper { font-weight: 400; }
.classic-helper h2 { color: #f5f5f5; font-size: 6px; font-weight: 600; }
.classic-helper-tabs { position: absolute; left: 15px; top: 48px; display: flex; width: 112px; height: 23px; }
.classic-helper-tabs button { flex: none; width: 50px; padding: 0; border: 1px solid #202020; border-top-color: #373737; border-radius: 2px 2px 0 0; background: rgba(0, 0, 0, .55); color: #bdbdbd; font-size: 5.8px; font-weight: 400; }
.classic-helper-tabs button:last-child { width: 62px; }
.classic-helper-tabs button.active { color: #d6d6d6; background: rgba(12, 12, 12, .55); border-top-color: #555; }
.classic-helper-content { position: absolute; top: 73px; left: 12px; width: 165px; height: 284px; color: #e4e4e4; font-size: 5.6px; font-weight: 400; }
.classic-helper-box { position: absolute; box-sizing: border-box; background-color: rgba(0, 0, 0, .35); background-image: var(--classic-tableTopLeft), var(--classic-tableTopRight), var(--classic-tableBottomLeft), var(--classic-tableBottomRight), var(--classic-tableTop), var(--classic-tableBottom), var(--classic-tableLeft), var(--classic-tableRight); background-position: left top, right top, left bottom, right bottom, left 14px top, left 14px bottom, left top 14px, right top 14px; background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, calc(100% - 28px) 14px, calc(100% - 28px) 14px, 14px calc(100% - 28px), 14px calc(100% - 28px); background-repeat: no-repeat; }
.classic-helper-content label { display: flex; align-items: center; gap: 1px; height: 15px; white-space: nowrap; }
.classic-helper-content input[type="checkbox"] { flex: none; box-sizing: border-box; appearance: none; width: 15px; min-width: 0; height: 15px; padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--classic-helperCheck) left -15px / 15px 30px no-repeat; box-shadow: none; letter-spacing: 0; }
.classic-helper-content input[type="checkbox"]:checked { background-position: left top; }
.classic-helper-content input[type="checkbox"]:disabled { opacity: 1; }
.classic-helper-content input[type="number"] { box-sizing: border-box; width: 20px; min-width: 0; height: 15px; padding: 0; border: 0; border-radius: 0; background: #eee var(--classic-helperInputNumber) center / 100% 100% no-repeat; box-shadow: none; color: #101010; font: 400 5.6px/15px Tahoma, Arial, sans-serif; letter-spacing: 0; text-align: center; }
.classic-helper-content input[type="number"]:disabled { opacity: 1; }
.classic-helper-content input[type="number"]::-webkit-inner-spin-button { appearance: none; }
.classic-helper-content button { padding: 0; color: #e8e8e8; font-size: 6.1px; font-weight: 400; }
.classic-helper-range { left: 0; top: 0; width: 68px; height: 50px; }
.classic-helper-range::before { content: ''; position: absolute; left: 6px; top: 15px; width: 38px; border-top: 1px solid #767676; }
.classic-helper-range > span { position: absolute; left: 6px; top: 5px; }
.classic-helper-range > b { position: absolute; left: 17px; top: 19px; width: 15px; height: 19px; overflow: hidden; background-position: left top; background-size: 15px 19px; background-repeat: no-repeat; font-size: 0; }
.classic-helper-range button { position: absolute; left: 44px; width: 16px; height: 15px; border: 0; background-repeat: no-repeat; }
.classic-helper-range-plus { top: 5px; background: var(--classic-statButton) left top / 16px 30px; }
.classic-helper-range-minus { top: 24px; background: var(--classic-helperRangeMinus) left top / 16px 30px; }
.classic-helper-range button:active { background-position: left bottom; }
.classic-helper-potion { left: 63px; top: 0; width: 102px; height: 50px; }
.classic-helper-potion label { position: absolute; left: 4px; top: 7px; }
.classic-helper-setting { width: 38px; height: 24px; border: 0; background: transparent var(--classic-helperSettingButton) center top / 38px 72px no-repeat; }
.classic-helper-setting:disabled { opacity: 1; }
.classic-helper-setting:hover:not(:disabled) { background-position: center center; }
.classic-helper-setting:active:not(:disabled) { background-position: center bottom; }
.classic-helper-potion .classic-helper-setting { position: absolute; left: 57px; top: 11px; }
.classic-helper-movement { left: 0; top: 47px; width: 165px; height: 39px; }
.classic-helper-long { position: absolute; left: 6px; top: 2px; }
.classic-helper-original { position: absolute; left: 6px; top: 17px; }
.classic-helper-distance { position: absolute; left: 98px; top: 21px; white-space: nowrap; }
.classic-helper-distance-value { position: absolute; left: 128px; top: 17px; }
.classic-helper-distance-unit { position: absolute; left: 150px; top: 21px; white-space: nowrap; }
.classic-helper-skills { left: 0; top: 83px; width: 165px; height: 120px; }
.classic-helper-skills > span { position: absolute; white-space: nowrap; }
.classic-helper-basic-label { left: 6px; top: 4px; }
.classic-helper-activation-label { left: 47px; top: 4px; }
.classic-helper-activation-two-label { left: 47px; top: 56px; }
.classic-helper-skill { position: absolute; box-sizing: border-box; width: 32px; height: 38px; border: 0; background: var(--classic-helperSkillBox) center / 32px 38px no-repeat; }
.classic-helper-skill::before { content: ''; position: absolute; left: 6px; top: 5px; width: 20px; height: 28px; background: var(--helper-skill-atlas) var(--helper-skill-x) var(--helper-skill-y) / 256px 256px no-repeat; }
.classic-helper-skill.empty::before, .classic-helper-skill:disabled::before { display: none; }
.classic-helper-basic { left: 5px; top: 15px; }
.classic-helper-activation-one { left: 49px; top: 15px; }
.classic-helper-activation-two { left: 49px; top: 66px; }
.classic-helper-party { position: absolute; left: 6px; top: 62px; }
.classic-helper-party-setting { position: absolute; left: 5px; top: 78px; }
.classic-helper-combo { position: absolute; left: 6px; top: 70px; }
.classic-helper-delay { position: absolute; left: 82px; top: 18px; }
.classic-helper-delay-value { position: absolute; left: 128px; top: 18px; }
.classic-helper-delay-unit { left: 150px; top: 22px; }
.classic-helper-condition { position: absolute; left: 82px; top: 35px; }
.classic-helper-condition-setting { position: absolute; left: 120px; top: 35px; }
.classic-helper-delay-two { top: 70px; }
.classic-helper-delay-value-two { top: 70px; }
.classic-helper-delay-unit-two { top: 74px; }
.classic-helper-condition-two { top: 87px; }
.classic-helper-condition-setting-two { top: 87px; }
.classic-helper-buffs { left: 0; top: 200px; width: 165px; height: 69px; }
.classic-helper-buffs > label { position: absolute; left: 6px; top: 3px; }
.classic-helper-buff-slots { position: absolute; left: 9px; top: 19px; display: flex; gap: 2px; }
.classic-helper-buff-slots .classic-helper-skill { position: relative; flex: none; padding: 0; }
.classic-helper-obtain-range { left: 0; top: 0; }
.classic-helper-obtain-repair { left: 63px; top: 0; width: 102px; height: 50px; }
.classic-helper-obtain-repair label { position: absolute; left: 4px; top: 7px; }
.classic-helper-obtain-all { left: 0; top: 47px; width: 165px; height: 30px; }
.classic-helper-obtain-all label { position: absolute; left: 5px; top: 5px; }
.classic-helper-obtain-selected { left: 0; top: 74px; width: 165px; height: 195px; }
.classic-helper-obtain-selected > label { position: absolute; }
.classic-helper-obtain-select { left: 5px; top: 5px; }
.classic-helper-obtain-jewel { left: 10px; top: 23px; }
.classic-helper-obtain-set { left: 73px; top: 23px; }
.classic-helper-obtain-zen { left: 10px; top: 38px; }
.classic-helper-obtain-excellent { left: 73px; top: 38px; }
.classic-helper-obtain-extra { left: 10px; top: 53px; }
.classic-helper-obtain-input { position: absolute; left: 22px; top: 69px; box-sizing: border-box; width: 94px; height: 15px; padding: 0 3px; border: 0; border-radius: 0; outline: none; background: #fff var(--classic-helperInputString) center / 94px 15px no-repeat; color: #151515; font-size: 6px; line-height: 15px; }
.classic-helper-obtain-input:focus-visible { outline: 1px solid #e0c56b; outline-offset: 1px; }
.classic-helper-obtain-add { position: absolute; left: 120px; top: 61px; }
.classic-helper-obtain-list { left: 4px; top: 88px; width: 158px; height: 75px; padding: 4px 5px; overflow-y: auto; scrollbar-color: #797979 #1a1a1a; scrollbar-width: thin; }
.classic-helper-obtain-list button { display: block; width: 100%; height: 12px; overflow: hidden; border: 0; background: transparent; color: #e4e4e4; font-size: 5.5px; line-height: 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.classic-helper-obtain-list button[aria-selected="true"] { background: #454545; }
.classic-helper-obtain-delete { position: absolute; left: 120px; top: 162px; }
.classic-helper-skill-menu { position: absolute; z-index: 5; inset: 0 auto auto 0; width: 0; height: 0; overflow: visible; pointer-events: none; }
.classic-helper-skill-menu .classic-helper-skill-option { position: absolute; width: 32px; height: 38px; border: 0; padding: 0; pointer-events: auto; }
.classic-helper-skill-option:hover, .classic-helper-skill-option[aria-selected="true"] { background-image: url(assets/interface/skills/newui_skillbox2.jpg); }
.classic-helper-ext { position: absolute; left: -190px; top: 0; z-index: 4; width: 190px; height: 433px; background-color: #111; background-image: var(--classic-header), var(--classic-bottom), var(--classic-left), var(--classic-right), var(--classic-surface); background-position: top center, bottom center, left top 64px, right top 64px, center top 64px; background-size: 190px 64px, 190px 45px, 21px calc(100% - 109px), 21px calc(100% - 109px), 148px calc(100% - 109px); background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat; box-shadow: 0 8px 24px #000b; color: #e4e4e4; font-size: 5.6px; font-weight: 400; }
.classic-helper-ext-page { position: absolute; inset: 0; }
.classic-helper-pane { position: absolute; left: 12px; width: 165px; height: 63px; }
.classic-helper-pane::before, .classic-helper-pane::after { content: ''; position: absolute; left: 0; box-sizing: border-box; background-color: rgba(0, 0, 0, .4); background-image: var(--classic-tableTopLeft), var(--classic-tableTopRight), var(--classic-tableBottomLeft), var(--classic-tableBottomRight), var(--classic-tableTop), var(--classic-tableBottom), var(--classic-tableLeft), var(--classic-tableRight); background-position: left top, right top, left bottom, right bottom, left 14px top, left 14px bottom, left top 14px, right top 14px; background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, calc(100% - 28px) 14px, calc(100% - 28px) 14px, 14px calc(100% - 28px), 14px calc(100% - 28px); background-repeat: no-repeat; }
.classic-helper-pane::before { top: 0; width: 65px; height: 20px; }
.classic-helper-pane::after { top: 18px; width: 165px; height: 45px; }
.classic-helper-pane > span { position: absolute; z-index: 1; left: 10px; top: 6px; white-space: nowrap; }
.classic-helper-pane-pre { top: 55px; }
.classic-helper-pane-sub { top: 120px; }
.classic-helper-radio { position: absolute; z-index: 1; display: flex; align-items: center; gap: 1px; height: 15px; white-space: nowrap; }
.classic-helper-radio input[type="radio"] { flex: none; box-sizing: border-box; appearance: none; width: 15px; min-width: 0; height: 15px; padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--classic-helperOption) left -15px / 15px 30px no-repeat; box-shadow: none; }
.classic-helper-radio input[type="radio"]:checked { background-position: left top; }
.classic-helper-pre-nearby { left: 17px; top: 78px; }
.classic-helper-pre-attacking { left: 17px; top: 93px; }
.classic-helper-sub-2 { left: 17px; top: 143px; }
.classic-helper-sub-3 { left: 17px; top: 158px; }
.classic-helper-sub-4 { left: 95px; top: 143px; }
.classic-helper-sub-5 { left: 95px; top: 158px; }
.classic-helper-hp { position: absolute; z-index: 1; left: 32px; top: 80px; width: 124px; height: 16px; background: var(--classic-helperVolumeBack) left top / 124px 16px no-repeat; touch-action: none; }
.classic-helper-hp i { display: block; height: 16px; background: var(--classic-helperVolumeColor) left top / 124px 16px no-repeat; pointer-events: none; }
.classic-helper-hp-label { position: absolute; z-index: 1; left: 32px; top: 98px; width: 124px; text-align: center; }
.classic-helper-off-box { left: 14px; top: 345px; width: 160px; height: 43px; pointer-events: none; }
.classic-helper-off { position: absolute; top: 351px; left: 41px; width: 106px; height: 29px; padding: 0; border: 0; background: #303030 var(--classic-helperButtonBig) center top / 100% 300% no-repeat; color: #d8c431; font-size: 6px; }
.classic-helper-off:hover { background-position: center center; }
.classic-helper-off:active { background-position: center bottom; }
.classic-helper-footer { position: absolute; top: 388px; left: 20px; width: 152px; height: 29px; display: flex; align-items: flex-start; }
.classic-helper-footer .classic-footer-exit { position: static; flex: none; width: 33px; background-size: 33px 58px; }
.classic-helper-footer .classic-footer-exit:hover { background-position: center top; }
.classic-helper-footer .classic-footer-exit:active { background-position: center bottom; }
.classic-helper-footer > button:not(.classic-footer-exit) { flex: none; width: 52px; height: 26px; padding: 0; border: 0; background: transparent var(--classic-helperFooterButton) center top / 52px 78px no-repeat; color: #ededed; font-size: 5.2px; font-weight: 400; }
.classic-helper-footer > button:nth-child(2) { margin-left: 12px; }
.classic-helper-footer > button:nth-child(3) { margin-left: 3px; }
.classic-helper-footer > button:not(.classic-footer-exit):hover { background-position: center center; }
.classic-helper-footer > button:not(.classic-footer-exit):active { background-position: center bottom; }
.classic-menu-backdrop { position: absolute; inset: 0; background: transparent; pointer-events: auto; }
.classic-menu { position: absolute; left: calc(205px * var(--classic-rx)); top: calc(100px * var(--classic-ry)); width: 230px; height: 192px; transform: scale(var(--classic-rx), var(--classic-ry)); transform-origin: top left; isolation: isolate; }
.classic-menu::before { content: ''; position: absolute; left: 0; top: 2px; z-index: -2; width: 222px; height: 182px; background: var(--classic-surface, none) left top / 225px 512px no-repeat; pointer-events: none; }
.classic-menu::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--classic-msgboxTop, none), var(--classic-msgboxBottom, none); background-position: left top, left 0 top 142px; background-size: 230px 67px, 230px 50px; background-repeat: no-repeat; pointer-events: none; }
.classic-menu-middle { position: absolute; left: 0; top: 67px; z-index: -1; width: 230px; height: 75px; background: var(--classic-msgboxMiddle, none) left top / 230px 15px repeat-y; pointer-events: none; }
.classic-menu button { position: absolute; left: 61px; width: 108px; height: 29px; padding: 0; border: 0; background: transparent var(--classic-msgboxButton, none) 0 0 / 108px 87px no-repeat; color: #fff; font: 400 6px/29px Tahoma, Arial, sans-serif; white-space: nowrap; }
.classic-menu button:nth-of-type(1) { top: 23px; }
.classic-menu button:nth-of-type(2) { top: 53px; }
.classic-menu button:nth-of-type(3) { top: 83px; }
.classic-menu button:nth-of-type(4) { top: 113px; }
.classic-menu button:nth-of-type(5) { top: 143px; }
.classic-menu button:hover { background-position: 0 -29px; }
.classic-menu button:active { background-position: 0 -58px; }
.classic-menu button:focus-visible { outline: none; }
@media (max-width: 700px) {
  .classic-clock { display: none; }
  .classic-location { width: 140px; height: 23px; font-size: 9px; line-height: 19px; white-space: nowrap; }
  .classic-event { left: 160px; width: 105px; height: 19px; font-size: 8px; line-height: 17px; white-space: nowrap; }
  .classic-panel { transform: scale(var(--classic-panel-scale)); }
  #inventoryPanel { transform: scale(var(--classic-panel-scale)) !important; }
  #personalStore { right: calc(190px * var(--classic-store-scale)); transform: scale(var(--classic-store-scale)) !important; }
  #mundo:has(#personalStore:not([hidden])) #inventoryPanel { transform: scale(var(--classic-store-scale)) !important; }
  #mundo:has(#inventoryPanel:not([hidden])):has(.classic-character:not([hidden])) #inventoryPanel { right: calc(190px * var(--classic-pair-scale)); transform: scale(var(--classic-pair-scale)) !important; }
  #mundo:has(#inventoryPanel:not([hidden])):has(.classic-character:not([hidden])) .classic-character { transform: scale(var(--classic-pair-scale)); }
  .classic-friend { transform: scale(var(--classic-friend-scale)); }
  .classic-warp { transform: scale(var(--classic-warp-scale)); transform-origin: top left; top: 24px; }
  .classic-menu { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--classic-menu-scale)); transform-origin: center; }
  .classic-minimap { right: 4px; bottom: calc(49px * var(--classic-ry)); transform: scale(1.05); }
  #inventoryPanel { --panel-text-rx: var(--classic-panel-scale); --panel-text-ry: var(--classic-panel-scale); }
  #inventoryPanel h2, #storagePanel h2, .inventory-gold, .storage-money { font-size: min(10px, calc(12px / var(--panel-text-ry))); }
  #mundo:has(#personalStore:not([hidden])) #inventoryPanel { --panel-text-rx: var(--classic-store-scale); --panel-text-ry: var(--classic-store-scale); }
  #mundo:has(#inventoryPanel:not([hidden])):has(.classic-character:not([hidden])) #inventoryPanel { --panel-text-rx: var(--classic-pair-scale); --panel-text-ry: var(--classic-pair-scale); }
  #personalStore h2 { font-size: 9px; }
  #mundo:has(#inventoryPanel:not([hidden])) .classic-location,
  #mundo:has(#inventoryPanel:not([hidden])) .classic-event,
  #classicUi:has(.classic-panel:not([hidden])) .classic-location,
  #classicUi:has(.classic-panel:not([hidden])) .classic-event { visibility: hidden; }
}