:root {
  --stone: #3a3d42;
  --stone-hi: #6a6e75;
  --gold: #f1c37a;
  --gold-dim: #9a7b45;
  --ink: #e8dcc0;
  --err: #ff8a6b;
  --ok: #9fd8a8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  min-height: 100vh;
  background: #050607;
  color: var(--ink);
  font-family: Cinzel, Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}

body.jugando { overflow: hidden; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse 90% 70% at 50% 8%, rgba(118, 138, 158, .07), transparent 60%), radial-gradient(ellipse 60% 55% at 50% 104%, rgba(150, 80, 25, .06), transparent 65%);
  content: "";
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage { width: min(800px, calc(100% - 32px)); margin-inline: auto; padding: 28px 0 40px; display: flex; flex-direction: column; align-items: center; }
.stage.full { min-height: 100vh; justify-content: center; }
#pantallas.hidden { display: none; }
body.jugando #pantallas { display: none; }

.screen { display: flex; flex-direction: column; align-items: center; width: 100%; }
.screen.hidden { display: none; }

.logo {
  width: 236px;
  margin-bottom: 30px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .9)) drop-shadow(0 0 34px rgba(95, 120, 148, .22));
  animation: logo-drop .7s ease both;
}

.frame {
  width: 100%;
  aspect-ratio: 329 / 245;
  background: url("../assets/xworld/login/login_back.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  position: relative;
  animation: frame-rise .8s .12s ease both;
}

.frame-form, .frame-select {
  position: absolute;
  left: 50%;
  top: 30%;
  bottom: 9%;
  width: 60%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}

.frame-form > *, .frame-select > * { animation: fade .55s both; }
.frame-form > :nth-child(1) { animation-delay: .32s; }
.frame-form > :nth-child(2) { animation-delay: .42s; }
.frame-form > :nth-child(3) { animation-delay: .52s; }
.frame-form > :nth-child(4) { animation-delay: .62s; }

input {
  height: 42px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(2, 4, 5, .92), rgba(15, 17, 19, .85));
  border: 1px solid rgba(58, 61, 66, .95);
  border-bottom-color: rgba(0, 0, 0, .85);
  color: var(--gold);
  font: 600 14px/1 Cinzel, Georgia, serif;
  letter-spacing: .2em;
  text-align: center;
  outline: none;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .88), inset 0 -1px 0 rgba(255, 255, 255, .04);
}

input::placeholder { color: rgba(154, 123, 69, .5); font-size: 10px; letter-spacing: .34em; text-indent: .34em; }

input:focus {
  border-color: rgba(241, 195, 122, .55);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .88), 0 0 20px rgba(241, 195, 122, .09);
}

.boton {
  height: 46px;
  margin-top: 5px;
  background: linear-gradient(180deg, #22252b, #101215 55%, #0a0c0e);
  border: 1px solid #45484e;
  border-top-color: var(--stone-hi);
  color: var(--gold);
  font: 700 13px/1 Cinzel, Georgia, serif;
  letter-spacing: .44em;
  text-indent: .44em;
  cursor: pointer;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: .18s ease;
  width: 100%;
}

.boton:hover:not(:disabled) {
  border-color: rgba(241, 195, 122, .6);
  color: #ffd98a;
  box-shadow: 0 7px 24px rgba(0, 0, 0, .7), 0 0 24px rgba(241, 195, 122, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.boton:disabled { opacity: .45; cursor: default; }

.alt-link {
  color: var(--gold-dim);
  font-size: 9px;
  letter-spacing: .32em;
  text-indent: .32em;
  text-decoration: none;
  text-align: center;
  transition: .18s ease;
}

.alt-link:hover { color: var(--gold); }

.hint {
  min-height: 18px;
  margin-top: 20px;
  color: rgba(154, 123, 69, .8);
  font-size: 10px;
  letter-spacing: .26em;
  text-align: center;
}

.hint.err { color: var(--err); }
.hint.ok { color: var(--ok); }

#pantallas.stage {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(100vw, 177.777778vh, 1600px);
  height: min(100vh, 56.25vw, 900px);
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  transform: translate(-50%, -50%);
  container-type: size;
}
#pantallas.stage.hidden { display: none; }

#screen-login {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: block;
  overflow: hidden;
  background: transparent;
}

#screen-login.hidden { display: none; }

#loginUI { position: fixed; inset: 0; }

.login-logo {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 2;
  width: min(580px, 36cqw);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 8px rgba(255, 161, 54, .2));
}

.login-server-flow {
  position: fixed;
  left: 50%;
  top: calc(50% - 96px);
  z-index: 3;
  width: 425px;
  height: 26px;
  transform: translateX(-232px);
}
.login-server-flow.hidden { display: none; }

.login-world-button,
.login-realm-button,
.login-corner-button,
.login-action {
  position: absolute;
  padding: 0;
  border: 0;
  outline: 0;
  color: #f4f4f4;
  cursor: pointer;
  image-rendering: auto;
  background-color: transparent;
  background-repeat: no-repeat;
  text-shadow: 0 1px 2px #000;
}

.login-world-button {
  left: 0;
  top: 0;
  width: 108px;
  height: 26px;
  background-image: url(assets/interface/cha_bt.png?v=stage2-login-button-20261003-01);
  background-size: 108px 104px;
}

.login-world-button:hover { background-position: 0 -26px; }
.login-world-button:active { background-position: 0 -52px; }
.login-world-button.selected { background-position: 0 -78px; }
.login-world-button span { font: 11px/26px Arial, sans-serif; letter-spacing: 0; }

.login-realm-button {
  left: 135px;
  top: 0;
  width: 193px;
  height: 26px;
  background-image: url(assets/interface/server_b2_all.png);
  background-size: 193px 78px;
}

.login-realm-button:hover { background-position: 0 -26px; }
.login-realm-button:active { background-position: 0 -52px; }
.login-realm-button span { display: block; padding-left: 16px; font: 11px/26px Arial, sans-serif; letter-spacing: 0; }
.login-realm-button span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px 0; background: #36d49e; box-shadow: 0 0 4px #36d49e; }
.login-realm-button.hidden { display: none; }

.login-panel {
  position: fixed;
  left: 50%;
  top: calc(66.6667% - 175px);
  z-index: 4;
  width: 329px;
  height: 245px;
  transform: translateX(-50%);
  background: url(assets/interface/login_back.png) 0 0 / 329px 245px no-repeat;
}

.login-panel.hidden { display: none; }
.login-form-native { position: absolute; inset: 0; font-family: Arial, sans-serif; }
.login-form-native h1 { position: absolute; left: 42px; top: 63px; width: 245px; color: #f1f1f1; font: 11px/14px Arial, sans-serif; letter-spacing: 0; text-align: center; }
.login-field { position: absolute; left: 0; width: 329px; height: 23px; color: #eee; font: 11px/23px Arial, sans-serif; }
.login-account { top: 106px; }
.login-password { top: 131px; }
.login-field > span { position: absolute; left: 31px; width: 72px; }
.login-field input {
  position: absolute;
  left: 109px;
  top: 0;
  width: 156px;
  height: 23px;
  padding: 2px 7px 1px;
  border: 0;
  background: url(assets/interface/login_me.png) 0 0 / 156px 23px no-repeat;
  color: #f2f2f2;
  font: 12px/20px Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  text-indent: 0;
  box-shadow: none;
}
.login-field input:focus { border: 0; box-shadow: inset 0 0 0 1px rgba(207, 181, 123, .46); }
.login-save { position: absolute; left: 109px; top: 156px; width: 178px; height: 18px; color: #d6ad48; font: 9px/16px Arial, sans-serif; }
.login-save input { width: 14px; height: 14px; margin: 1px 10px 0 0; vertical-align: top; accent-color: #c9c9c9; }
.login-save span { letter-spacing: 0; }

.login-action { top: 178px; width: 54px; height: 30px; background-size: 54px 90px; }
.login-ok { left: 150px; background-image: url(assets/interface/message_ok_b_all.png); }
.login-cancel { left: 211px; background-image: url(assets/interface/loding_cancel_b_all.png); }
.login-action:hover { background-position: 0 -30px; }
.login-action:active { background-position: 0 -60px; }
.login-action:disabled { opacity: .52; cursor: default; }

.login-corner-button { position: fixed; bottom: calc(5.5cqh + 11px); z-index: 5; width: 54px; height: 30px; background-size: 54px 90px; }
#loginDecoration { position: fixed; right: 0; bottom: calc(5.5cqh - 3px); z-index: 4; width: 189px; height: 103px; background: url(assets/interface/deco.png) 0 0 / 189px 103px no-repeat; pointer-events: none; }
.login-menu-button { left: 30px; background-image: url(assets/interface/server_menu_b_all.png); }
.login-credit-button { right: 30px; background-image: url(assets/interface/server_credit_b_all.png); }
.login-corner-button:hover { background-position: 0 -30px; }
.login-corner-button:active { background-position: 0 -60px; }

#loginCopyright { position: fixed; left: 0; right: 0; bottom: 5px; color: #e5e5e5; font: 11px/14px Arial, sans-serif; letter-spacing: 0; text-align: center; text-shadow: 0 1px 2px #000; }
#screen-login > #loginUI > .hint { position: fixed; left: 50%; bottom: calc(5.5cqh + 50px); z-index: 6; width: min(640px, calc(100cqw - 140px)); min-height: 18px; margin: 0; transform: translateX(-50%); color: #d6ad48; font: 10px/18px Arial, sans-serif; letter-spacing: .18em; text-shadow: 0 1px 2px #000; }
#screen-login > #loginUI > .hint.err { color: #e77d60; }
#screen-login > #loginUI > .hint.ok { color: #a7d7a9; }

.login-utility-dialog { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .56); }
.login-utility-dialog.hidden { display: none; }
.login-utility-window,
.login-credit-window { position: absolute; left: 50%; top: 50%; width: 220px; padding: 25px 24px 22px; transform: translate(-50%, -50%); border: 1px solid #979797; background: #202020 url(assets/interface/op1_stone.jpg); box-shadow: inset 0 0 0 3px #101010, 0 10px 35px #000; text-align: center; }
.login-utility-action { display: block; width: 116px; height: 28px; margin: 8px auto 0; border: 1px solid #8e8e8e; background: linear-gradient(#444, #171717); color: #eee; font: 11px/26px Arial, sans-serif; letter-spacing: 0; text-decoration: none; cursor: pointer; }
.login-credit-window strong, .login-credit-window span, .login-credit-window small { display: block; margin-bottom: 8px; color: #ddd; font-family: Arial, sans-serif; letter-spacing: 0; }
.login-credit-window strong { color: #d6ad48; font-size: 15px; }
.login-credit-window span { font-size: 11px; }
.login-credit-window small { font-size: 9px; }

#screen-login, #screen-login * { cursor: url(assets/cursor/mano.png) 2 2, default; }
#screen-login.clic, #screen-login.clic * { cursor: url(assets/cursor/push.png) 2 2, default; }

@media (max-width: 620px), (max-height: 500px) {
  .login-logo { width: min(300px, 42cqw); }
  .login-server-flow { transform: translateX(-50%); }
  .login-world-button { left: 43px; }
  .login-realm-button { left: 178px; }
  .login-panel { transform: translateX(-50%) scale(.86); transform-origin: top center; }
  .login-menu-button { left: 10px; }
  .login-credit-button { right: 10px; }
}

.select-title {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5em;
  text-indent: .5em;
  text-align: center;
  margin-bottom: 22px;
}

.roster { display: grid; gap: 10px; align-content: start; }

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid rgba(58, 61, 66, .95);
  background: linear-gradient(180deg, rgba(2, 4, 5, .84), rgba(15, 17, 19, .72));
  cursor: pointer;
  transition: .16s ease;
  animation: fade .5s both;
}

.row:nth-child(2) { animation-delay: .08s; }
.row:nth-child(3) { animation-delay: .16s; }
.row:nth-child(4) { animation-delay: .24s; }
.row:nth-child(5) { animation-delay: .32s; }

.row:hover, .row.sel {
  border-color: rgba(241, 195, 122, .6);
  box-shadow: 0 0 20px rgba(241, 195, 122, .08);
}

.row b { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: .14em; }
.row span { color: var(--gold-dim); font-size: 10px; letter-spacing: .3em; }

.roster-empty {
  padding: 30px 14px;
  border: 1px dashed rgba(154, 123, 69, .35);
  color: var(--gold-dim);
  font-size: 10px;
  letter-spacing: .28em;
  text-align: center;
}

#mundo { position: fixed; left: 50%; top: 50%; width: min(100vw, 177.777778vh, 1600px); height: min(100vh, 56.25vw, 900px); z-index: 1; overflow: hidden; transform: translate(-50%, -50%); container-type: size; }
#mundo canvas { display: block; touch-action: none; }
#mundo.oculto { display: none; }

#hudmu { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
#hud-frame { position: absolute; inset: auto 0 0; height: 51px; overflow: hidden; }
.hud-frame-piece { position: absolute; bottom: 0; background-repeat: no-repeat; background-size: 100% 100%; }
.vial { position: absolute; filter: drop-shadow(0 0 2px #000); }
.vial::before,
.vial-fill { position: absolute; inset: 0; background: var(--vial-image) center / 100% 100% no-repeat; }
.vial::before { content: ""; opacity: .28; filter: saturate(.78) brightness(.7); }
.vial-fill { clip-path: inset(var(--vial-empty, 0%) 0 0 0); }
.num { position: absolute; font: 700 11px/1 'Trebuchet MS', Arial; color: #ffedb0; text-shadow: 0 0 3px #000, 0 1px 1px #000; text-align: center; white-space: nowrap; }
#exbar { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; opacity: .95; }
#expPercent { position: absolute; color: #f2f1e9; font: 700 8px/1 Arial, sans-serif; text-align: right; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
#expHover { position: absolute; pointer-events: auto; }
#expTooltip { position: absolute; z-index: 81; display: none; padding: 4px 4px 3px; border: 1px solid #000; background: rgba(0, 0, 0, .8); color: #fff; font: 400 12px/14px Tahoma, Arial, sans-serif; white-space: nowrap; pointer-events: none; }
#mundo:has(#expHover:hover) #expTooltip { display: block; }

#skillHud { position: fixed; left: 50%; bottom: 6px; z-index: 7; width: 32px; height: 38px; transform: translateX(-50%); pointer-events: auto; }
#skillHud[hidden] { display: none; }
.skill-current,
.skill-slot { position: relative; flex: 0 0 32px; width: 32px; height: 38px; padding: 0; border: 0; background: url(assets/interface/skills/newui_skillbox.jpg) center / 32px 38px no-repeat; cursor: pointer; }
.skill-current:hover,
.skill-current[aria-expanded="true"],
.skill-slot.selected { background-image: url(assets/interface/skills/newui_skillbox2.jpg); }
.skill-slot:focus-visible { outline: 1px solid #fff0b2; outline-offset: -2px; }
.skill-icon { position: absolute; left: 6px; top: 6px; width: 20px; height: 28px; background-image: var(--skill-atlas); background-position: var(--skill-x) var(--skill-y); background-size: 256px 256px; background-repeat: no-repeat; pointer-events: none; }
.skill-current .skill-icon { left: 7px; }
.skill-list { position: absolute; bottom: 41px; display: block; padding: 0; border: 0; background: transparent; pointer-events: none; }
.skill-list .skill-slot { position: absolute; pointer-events: auto; }
.skill-list[hidden] { display: none; }
.pet-command-list { position: absolute; left: -32px; bottom: 79px; display: grid; grid-template-columns: repeat(4, 32px); width: 128px; height: 38px; pointer-events: none; }
.pet-command-list[hidden] { display: none; }
.pet-command-list .pet-command-slot { pointer-events: auto; }
.skill-hotkey { position: absolute; right: 2px; bottom: 1px; color: #fff0b2; font: 700 9px/1 Arial, sans-serif; text-shadow: 0 1px 2px #000, 0 0 2px #000; pointer-events: none; }

#inventoryToggle {
  position: fixed;
  right: 76px;
  bottom: 8px;
  z-index: 7;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: url(assets/interface/inventory/menu_inventory.jpg) center / 48px 48px no-repeat;
  cursor: pointer;
}
#inventoryToggle:hover,
#inventoryToggle[aria-expanded="true"] { filter: brightness(1.28); }
#personalStore {
  position: fixed;
  right: calc(190px * var(--classic-rx));
  top: 0;
  z-index: 9;
  width: 190px;
  height: 429px;
  transform-origin: top right;
  color: #ded8cb;
  background-color: #111214;
  background-image:
    var(--store-frame-top, none),
    var(--inventory-frame-bottom, none),
    var(--inventory-frame-left, none),
    var(--inventory-frame-right, none),
    var(--inventory-surface, url(assets/interface/inventory/item_back01.jpg));
  background-size: 190px 64px, 190px 45px, 21px 320px, 21px 320px, 190px 429px;
  background-position: center top, center bottom, left top 64px, right top 64px, center top;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .75);
  pointer-events: auto;
}
#personalStore[hidden] { display: none; }
#personalStore h2 {
  position: absolute;
  left: 20px;
  top: 15px;
  width: 150px;
  margin: 0;
  color: #d1a062;
  font: 400 6px/11px Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.personal-store-close {
  position: absolute;
  right: 8px;
  top: 7px;
  z-index: 2;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}
.personal-store-titlebar {
  position: absolute;
  left: 12px;
  top: 49px;
  width: 169px;
  height: 26px;
  background: var(--store-title, none) left top / 169px 26px no-repeat;
}
.personal-store-grid {
  position: absolute;
  left: 16px;
  top: 90px;
  width: 160px;
  height: 80px;
  background: var(--inventory-cell, url(assets/interface/inventory/inventory_box.jpg)) 0 0 / 20px 20px repeat;
}
.personal-store-footer {
  position: absolute;
  top: 391px;
  width: 36px;
  height: 29px;
  padding: 0;
  border: 0;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 36px 58px;
}
.personal-store-footer:active { background-position: left bottom; }
.personal-store-footer-exit { left: 13px; background-image: var(--inventory-exit, none); }
.personal-store-footer-open { left: 53px; background-image: var(--inventory-shop, none); }
.personal-store-footer-close { left: 93px; background-image: var(--store-close-button, none); }
.personal-store-footer:disabled { opacity: 1; }
#inventoryPanel {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9;
  width: 190px;
  height: 429px;
  transform-origin: top right;
  color: #ded8cb;
  background-color: #111214;
  background-image:
    var(--inventory-frame-top, none),
    var(--inventory-frame-bottom, none),
    var(--inventory-frame-left, none),
    var(--inventory-frame-right, none),
    var(--inventory-surface, url(assets/interface/inventory/item_back01.jpg));
  background-size:
    190px 64px,
    190px 45px,
    21px calc(100% - 109px),
    21px calc(100% - 109px),
    190px 429px;
  background-position:
    center top,
    center bottom,
    left 0 top 64px,
    right 0 top 64px,
    center top;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .75);
  pointer-events: auto;
}
#inventoryPanel[hidden] { display: none; }
.gdi-text-layer { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.gdi-text-layer[hidden] { display: none; }
.gdi-text-layer canvas { position: absolute; display: block; image-rendering: pixelated; }
.gdi-replaced { visibility: hidden; }
#inventoryPanel, #storagePanel { --panel-text-rx: var(--classic-rx, 1); --panel-text-ry: var(--classic-ry, 1); }
#inventoryPanel h2 {
  position: absolute;
  left: 14px;
  top: 12px;
  width: calc(162px * var(--panel-text-rx));
  margin: 0;
  color: #d7d1c6;
  font: 700 12.4px/calc(11px * var(--panel-text-ry)) Tahoma, Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.inventory-close {
  position: absolute;
  right: 8px;
  top: 7px;
  z-index: 3;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
.inventory-close:hover { filter: brightness(1.25); }
.equipment-slots { position: absolute; inset: 0; }
.equipment-slot { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }
.equipment-slot[data-drop-state="blocked"]::after { content: ''; position: absolute; left: 1px; top: 0; width: calc(100% - 4px); height: calc(100% - 4px); background: rgb(230 26 26 / 40%); pointer-events: none; }
.equipment-helper { left: 14px; top: 44px; width: 46px; height: 46px; }
.equipment-helm { left: 76px; top: 44px; width: 46px; height: 46px; }
.equipment-wings { left: 121px; top: 44px; width: 61px; height: 46px; }
.equipment-weapon-right { left: 14px; top: 88px; width: 46px; height: 66px; }
.equipment-pendant { left: 57px; top: 88px; width: 28px; height: 28px; }
.equipment-armor { left: 76px; top: 88px; width: 46px; height: 66px; }
.equipment-weapon-left { left: 135px; top: 88px; width: 46px; height: 66px; }
.equipment-gloves { left: 14px; top: 153px; width: 46px; height: 46px; }
.equipment-ring-right { left: 57px; top: 153px; width: 28px; height: 28px; }
.equipment-pants { left: 76px; top: 153px; width: 46px; height: 46px; }
.equipment-ring-left { left: 121px; top: 153px; width: 28px; height: 28px; }
.equipment-boots { left: 135px; top: 153px; width: 46px; height: 46px; }
.equipment-slot > .inventory-item { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.inventory-grid {
  position: absolute;
  left: 15px;
  top: 198px;
  width: 160px;
  height: 160px;
}
.inventory-grid::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--inventory-cell, url(assets/interface/inventory/inventory_box.jpg)) 0 0 / 20px 20px repeat;
  pointer-events: none;
}
.inventory-occupancy { position: absolute; inset: 0; }
.inventory-occupied-cell { position: absolute; background: rgba(77, 128, 128, .6); }
.inventory-items { position: absolute; z-index: 2; inset: 0; }
.inventory-item {
  position: absolute;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #dce2e4;
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}
.inventory-item:hover,
.inventory-item:focus-visible { z-index: 2; filter: brightness(1.2); }
.inventory-item:focus-visible { outline: 1px solid #80b3ff; outline-offset: -1px; }
.inventory-item-picked { opacity: 0; pointer-events: none; }
.inventory-item-retiring { pointer-events: none; }
.inventory-carry-ghost { position: fixed; z-index: 10001; pointer-events: none; }
.inventory-drop-preview { position: absolute; z-index: 0; pointer-events: none; }
.inventory-drop-preview[hidden] { display: none; }
.inventory-drop-cell { position: absolute; width: 20px; height: 20px; background: rgb(26 102 204 / 40%); }
.inventory-drop-cell[data-state="blocked"] { background: rgb(255 51 51 / 40%); }
.inventory-drop-cell[data-state="upgrade"] { background: rgb(51 102 51 / 40%); }
.inventory-item-icon { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.native-item-display { position: absolute; inset: 0; pointer-events: none; }
.inventory-item.native-icon > .native-item-display { transform: scaleX(calc(var(--classic-ry, 1) / var(--classic-rx, 1))); transform-origin: center; }
.inventory-item.native-icon:hover, .inventory-item.native-icon:focus-visible { filter: none; }
.equipment-slot > .inventory-item.native-icon { overflow: visible; }
.equipment-slot > .inventory-item.native-icon > .native-item-display {
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--item-width);
  height: var(--item-height);
  transform: translate(-50%, -50%) scaleX(calc(var(--classic-ry, 1) / var(--classic-rx, 1)));
}
.inventory-item.native-pending .inventory-item-icon { visibility: hidden; }
.inventory-items .inventory-item.native-icon .inventory-item-icon,
.storage-items .inventory-item.native-icon .inventory-item-icon,
.equipment-slot > .inventory-item.native-icon .inventory-item-icon { image-rendering: pixelated; }
.inventory-item.native-overflow { overflow: visible; }
.inventory-item.native-overflow .inventory-item-icon { position: absolute; }
.inventory-item[data-item-index="3078"] .inventory-item-icon { transform: scale(1.15); transform-origin: center; }
.inventory-item.native-icon[data-item-index="3078"] .inventory-item-icon { transform: none; }
.inventory-item.ancient .inventory-item-icon { filter: drop-shadow(0 0 2px #dfbb31); }
@media (max-width: 700px) {
  .inventory-item.native-icon > .native-item-display { transform: none; }
  .inventory-item.native-icon .inventory-item-icon { image-rendering: auto !important; }
  .equipment-slot > .inventory-item.native-icon > .native-item-display { transform: translate(-50%, -50%); max-width: 100%; }
}
.inventory-item-missing { padding: 2px; border: 1px solid rgba(130, 116, 91, .64); background: #151719; }
.inventory-gold {
  position: absolute;
  left: 11px;
  top: 364px;
  width: 170px;
  height: 26px;
  background: var(--inventory-money, url(assets/interface/inventory/item_money.jpg)) center / 170px 26px no-repeat;
  color: #ffdc96;
  font: 700 calc(12px / var(--panel-text-ry))/10px Tahoma, Arial, sans-serif;
}
.inventory-gold-value { position: absolute; left: 39px; top: 7px; white-space: nowrap; font: 700 12.4px/calc(10px * var(--panel-text-ry)) Tahoma, Arial, sans-serif; }
.inventory-footer-button {
  position: absolute;
  top: 391px;
  width: 36px;
  height: 29px;
  padding: 0;
  border: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 36px 58px;
  box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, .5);
  cursor: pointer;
}
.inventory-footer-button:disabled { opacity: 1; cursor: default; }
.inventory-footer-close {
  left: 13px;
  box-sizing: border-box;
  padding: 2px;
  background-image: var(--inventory-exit, none);
  background-origin: border-box;
  background-clip: content-box;
  filter: brightness(.88);
}
.inventory-footer-close:active { background-position: 0 -29px; }
.inventory-shop { left: 87px; background-image: var(--inventory-shop, none); }
.inventory-shop[aria-expanded="true"] { background-image: var(--store-close-button, none); }
.inventory-expand { left: 124px; background-image: var(--inventory-expand, none); }

#storagePanel {
  position: fixed;
  right: calc(190px * var(--classic-rx));
  top: 0;
  z-index: 9;
  width: 190px;
  height: 429px;
  transform-origin: top right;
  color: #ded8cb;
  background-color: #111214;
  background-image:
    var(--storage-frame-top, none),
    var(--storage-frame-bottom, none),
    var(--storage-frame-left, none),
    var(--storage-frame-right, none),
    var(--storage-surface, url(assets/interface/inventory/item_back01.jpg));
  background-size: 190px 64px, 190px 45px, 21px 320px, 21px 320px, 190px 429px;
  background-position: center top, center bottom, left top 64px, right top 64px, center top;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .75);
  pointer-events: auto;
}
#storagePanel[hidden] { display: none; }
#storagePanel h2 {
  position: absolute;
  left: 30px;
  top: 12px;
  width: calc(130px * var(--panel-text-rx));
  margin: 0;
  color: #fff;
  font: 700 12.4px/calc(10px * var(--panel-text-ry)) Tahoma, Arial, sans-serif;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 0 1px 2px #000;
}
.storage-close {
  position: absolute;
  right: 8px;
  top: 7px;
  z-index: 3;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.storage-page {
  position: absolute;
  top: 5px;
  z-index: 2;
  width: 16px;
  height: 17.6px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 52.8px;
}
.storage-prev { left: 50px; background-image: var(--storage-prev, none); }
.storage-next { right: 50px; background-image: var(--storage-next, none); }
.storage-grid { position: absolute; left: 15px; top: 36px; width: 160px; height: 300px; }
.storage-grid::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: -3px -5px -6px -4px;
  background: var(--storage-grid, none) 0 0 / 169px 309px no-repeat;
  pointer-events: none;
}
.storage-occupancy, .storage-items { position: absolute; inset: 0; }
.storage-occupancy { z-index: 0; }
.storage-items { z-index: 2; }
.storage-occupied-cell { position: absolute; background: rgba(77, 128, 128, .6); }
.storage-money {
  position: absolute;
  left: 10px;
  top: 342px;
  width: 170px;
  height: 46px;
  background: var(--storage-money, none) center / 170px 46px no-repeat;
  font: 700 calc(12px / var(--panel-text-ry))/10px Tahoma, Arial, sans-serif;
}
.storage-gold-value { position: absolute; right: 12px; top: 8px; color: #ffdc96; font: 700 12.4px/calc(10px * var(--panel-text-ry)) Tahoma, Arial, sans-serif; }
.storage-fee { position: absolute; left: 15px; right: 12px; top: 29px; display: flex; justify-content: space-between; color: #f04040; }
.storage-fee-value { color: #ffdc96; }
.storage-fee > span { font: 700 12.4px/calc(10px * var(--panel-text-ry)) Tahoma, Arial, sans-serif; }
#inventoryPanel h2, #storagePanel h2, .inventory-gold-value, .storage-gold-value, .storage-fee > span {
  transform: scale(calc(1 / var(--panel-text-rx)), calc(1 / var(--panel-text-ry)));
}
#inventoryPanel h2, #storagePanel h2 { transform-origin: left top; }
.storage-gold-value, .storage-fee-value { transform-origin: right center; }
.inventory-gold-value, .storage-fee-label { transform-origin: left center; }
#mundo #inventoryPanel h2, #mundo #storagePanel h2 { font-size: 12.4px; }
.storage-footer {
  position: absolute;
  top: 390px;
  width: 36px;
  height: 29px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 36px 58px;
}
.storage-deposit { left: 16px; background-image: var(--storage-deposit, none); }
.storage-withdraw { left: 52px; background-image: var(--storage-withdraw, none); }
.storage-lock { left: 88px; background-image: var(--storage-lock, none); }
.storage-expand { left: 124px; background-image: var(--storage-expand, none); }
.storage-footer:disabled, .storage-page:disabled { opacity: 1; cursor: default; }

#monster-bars { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.monster-health { position: absolute; display: flex; width: 52px; height: 7px; gap: 1px; padding: 1px; transform: translate(-50%, -50%); border: 1px solid #21130f; background: rgba(12, 7, 6, .9); }
.monster-health i { display: block; flex: 1 1 0; height: 3px; background: #3a1513; }
.monster-health i.activa { background: #c52b20; }

#joy { position: fixed; left: 24px; bottom: 24px; width: 132px; height: 132px; border-radius: 50%; background: rgba(6, 5, 3, .5); border: 2px solid rgba(245, 197, 24, .3); display: none; touch-action: none; z-index: 6; }
#joy.ver { display: block; }
#joyNub { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(245, 197, 24, .35); border: 2px solid rgba(245, 197, 24, .6); }

#salir-btn {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 7;
  padding: 8px 14px;
  background: rgba(5, 4, 2, .7);
  border: 1px solid rgba(245, 197, 24, .3);
  border-radius: 8px;
  color: var(--gold-dim);
  font: 600 9px/1 Cinzel, Georgia, serif;
  letter-spacing: .25em;
  text-indent: .25em;
  cursor: pointer;
}

#salir-btn:hover { color: var(--gold); border-color: rgba(245, 197, 24, .6); }

@keyframes logo-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes frame-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 620px) {
  .logo { width: 170px; margin-bottom: 20px; }
  .stage { padding-top: 16px; }
  input { height: 38px; letter-spacing: .1em; }
  input::placeholder { letter-spacing: .18em; text-indent: .18em; }
  .boton { height: 42px; letter-spacing: .3em; text-indent: .3em; }
  .row b { font-size: 13px; }
  .row span { font-size: 8px; }
}

#screen-select { position: relative; background: transparent; }
#selScene { position: fixed; left: 0; top: 5.208333%; z-index: 0; width: 100%; height: 89.583333%; display: block; pointer-events: auto; cursor: url(assets/cursor/mano.png) 2 2, default; }
body.jugando #selScene { pointer-events: none; }
#selScene:active { cursor: url(assets/cursor/push.png) 2 2, default; }
#screen-select .logo { position: fixed; top: 26px; left: 50%; transform: translateX(-50%); z-index: 6; }
#selUI { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#selLabels { position: absolute; inset: 0; pointer-events: none; }
#screen-select.create-active #selLabels { visibility: hidden; }
.sel-label { position: fixed; width: 118px; transform: translate(-50%, -100%); padding: 6px 6px 7px; border: 1px solid rgba(204, 204, 204, .82); background: rgba(0, 0, 0, .84); box-shadow: inset 0 0 0 1px rgba(42, 42, 42, .9); text-align: center; white-space: nowrap; }
.sel-label b { display: block; color: #f4f4f4; font: 700 11px/13px Arial, sans-serif; letter-spacing: 0; }
.sel-label span { display: block; margin: 0; color: #e7e7e7; font: 10px/12px Arial, sans-serif; letter-spacing: 0; }
.sel-label .sel-label-class { color: #eab36a; }
#selUI .select-title { display: none; }
#selName { display: none; }
#selName b { display: block; color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: .22em; text-indent: .22em; }
#selName span { display: block; margin-top: 6px; color: var(--gold); font-size: 11px; letter-spacing: .34em; text-indent: .34em; }
#selPrev, #selNext { display: none; }
#selPrev:hover, #selNext:hover { border-color: rgba(241, 195, 122, .6); }
#selPrev { left: 5cqw; }
#selNext { right: 5cqw; }
#selBottomBar { position: fixed; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .18) 38%, rgba(0, 0, 0, .64)); pointer-events: none; }
#selDecoration { position: fixed; right: 0; bottom: 0; width: 189px; height: 103px; background: url(assets/interface/deco.png) 0 0 / 189px 103px no-repeat; pointer-events: none; }
#selBottomLeft, #selBottomRight { position: fixed; bottom: calc(5.208333cqh + 10px); display: flex; gap: 1px; pointer-events: auto; }
#selBottomLeft { left: 22px; }
#selBottomRight { right: 22px; }
#selBottomLeft button, #selBottomRight button { width: 54px; height: 30px; min-width: 54px; flex: 0 0 54px; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; cursor: inherit; }
#selCreate { background-image: url(assets/interface/b_create.png); background-size: 54px 120px; }
#selMenu { background-image: url(assets/interface/server_menu_b_all.png); background-size: 54px 90px; }
#selEnter { background-image: url(assets/interface/b_connect.png); background-size: 54px 120px; }
#selDelete { background-image: url(assets/interface/b_delete.png); background-size: 54px 120px; }
#selCreate:hover:not(:disabled), #selEnter:hover:not(:disabled), #selDelete:hover:not(:disabled) { background-position: 0 -30px; }
#selMenu:hover:not(:disabled) { background-position: 0 -30px; }
#selCreate:active, #selEnter:active, #selDelete:active { background-position: 0 -60px; }
#selMenu:active { background-position: 0 -60px; }
#selCreate:disabled, #selEnter:disabled, #selDelete:disabled { background-position: 0 -90px; }
#screen-select .hint { position: fixed; bottom: 22px; left: 0; right: 0; text-align: center; z-index: 6; }
#screen-select, #screen-select * { cursor: url(assets/cursor/mano.png) 2 2, default; }
#screen-select.clic, #screen-select.clic * { cursor: url(assets/cursor/push.png) 2 2, default; }

.create-dialog { position: fixed; inset: 0; z-index: 8; pointer-events: auto; }
.create-dialog.hidden { display: none; }
.create-window { position: absolute; left: 50%; top: 50%; width: 454px; height: 406px; transform: translate(-50%, -50%) scale(var(--create-scale, 1)); transform-origin: center; }
#createStats { position: absolute; left: 346px; top: 24px; width: 108px; height: 80px; padding-top: 8px; background: rgba(0, 0, 0, .56); }
#createStats.dark-lord { height: 96px; }
.create-stat-row { position: relative; height: 17px; color: #eee; font: 11px/17px Arial, sans-serif; white-space: nowrap; }
.create-stat-label { position: absolute; left: 22px; color: #f2f2f2; }
.create-stat-value { position: absolute; left: 76px; color: #ffb546; }
#createClasses { position: absolute; inset: 0; }
.create-class { position: absolute; left: 346px; width: 108px; height: 26px; padding: 0; border: 0; background: url(assets/interface/cha_bt.png?v=stage2-login-button-20261003-01) 0 0 / 108px 104px no-repeat; color: #c2c2c2; font: 11px/26px Arial, sans-serif; text-align: center; text-shadow: 0 1px 1px #000; }
.create-class:hover { background-position: 0 -26px; color: #fff; }
.create-class:active { background-position: 0 -52px; }
.create-class.selected, .create-class.selected:hover, .create-class.selected:active { background-position: 0 -78px; color: #fff; }
.create-name-frame { position: absolute; left: 0; top: 317px; width: 346px; height: 38px; background: url(assets/interface/cha_id.png) 0 0 / 346px 38px no-repeat; }
#createName { position: absolute; left: 78px; top: 6px; width: 250px; height: 38px; padding: 0; border: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; background: transparent; box-shadow: none; color: #eee; font: 12px/38px Arial, sans-serif; letter-spacing: .02em; text-align: left; cursor: text; }
#createName:focus { border: 0; box-shadow: none; }
#createName::placeholder { color: transparent; }
#createDescription { position: absolute; left: 0; top: 359px; width: 454px; height: 47px; padding: 8px 10px 0; overflow: hidden; background: rgba(0, 0, 0, .56); color: #eee; font: 11px/19px Arial, sans-serif; white-space: normal; }
.create-action { position: absolute; top: 325px; width: 54px; height: 30px; padding: 0; border: 0; background-repeat: no-repeat; cursor: inherit; }
.create-ok { left: 346px; background-image: url(assets/interface/message_ok_b_all.png); background-size: 54px 90px; }
.create-cancel { left: 400px; background-image: url(assets/interface/loding_cancel_b_all.png); background-size: 54px 90px; }
.create-action:hover { background-position: 0 -30px; }
.create-action:active { background-position: 0 -60px; }
.delete-dialog { position: fixed; inset: 0; z-index: 9; pointer-events: auto; }
.delete-dialog.hidden { display: none; }
.delete-window { position: absolute; left: 50%; top: 50%; width: 352px; height: 113px; transform: translate(-50%, -50%) scale(var(--delete-scale, 1)); transform-origin: center; background: url(assets/interface/message_back.png) 0 0 / 352px 113px no-repeat; }
#deleteMessage { position: absolute; left: 25px; top: 31px; width: 302px; max-height: 38px; overflow: hidden; color: #eee; font: 12px/19px Arial, sans-serif; text-align: center; }
#deleteResidentFrame { display: none; position: absolute; left: 32px; top: 76px; width: 171px; height: 23px; background: url(assets/interface/delete_secret_number.png) 0 0 / 171px 23px no-repeat; }
.delete-window.resident-step #deleteResidentFrame { display: block; }
#deleteResident { position: absolute; left: 10px; top: 1px; width: 150px; height: 21px; padding: 0; border: 0; background: transparent; box-shadow: none; color: #eee; font: 12px/21px Arial, sans-serif; letter-spacing: .08em; cursor: text; }
#deleteResident:focus { border: 0; box-shadow: none; }
.delete-action { position: absolute; top: 72px; width: 54px; height: 30px; padding: 0; border: 0; outline: none; background-repeat: no-repeat; cursor: inherit; background-size: 54px 90px; }
.delete-ok { left: 98px; background-image: url(assets/interface/message_ok_b_all.png); }
.delete-cancel { left: 200px; background-image: url(assets/interface/loding_cancel_b_all.png); }
.delete-window.resident-step .delete-ok { left: 209px; }
.delete-window.resident-step .delete-cancel { left: 264px; }
.delete-action:hover { background-position: 0 -30px; }
.delete-action:active { background-position: 0 -60px; }

.system-menu-dialog, .option-dialog, .exit-dialog {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, .66);
  pointer-events: auto;
}
.system-menu-dialog.hidden, .option-dialog.hidden, .exit-dialog.hidden, .exit-screen.hidden { display: none; }
.option-dialog { z-index: 11; }
.exit-dialog { z-index: 12; }
.mu-system-window {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 213px;
  transform: translate(-50%, -50%);
  background-color: #171717;
  background-image:
    url(assets/interface/op1_back1.png),
    url(assets/interface/op1_back2.png),
    url(assets/interface/op1_back3.jpg),
    url(assets/interface/op1_back4.jpg),
    url(assets/interface/op1_stone.jpg);
  background-position: center top, center bottom, left 64px, right 64px, center;
  background-size: 213px 64px, 213px 43px, 5px 8px, 5px 8px, 128px 128px;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .72);
}
.system-menu-window { height: 187px; }
.system-menu-action {
  position: absolute;
  left: 52px;
  width: 108px;
  height: 30px;
  padding: 0 0 1px;
  border: 0;
  outline: none;
  background: url(assets/interface/op1_b_all.png) 0 0 / 108px 120px no-repeat;
  color: #d4d4d4;
  font: 12px/30px Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  cursor: inherit;
}
.system-menu-action:hover, .system-menu-action:focus-visible { background-position: 0 -30px; color: #fff; }
.system-menu-action:active { background-position: 0 -60px; }
#systemExit { top: 33px; }
#systemServer { top: 67px; }
#systemOptions { top: 101px; }
#systemClose { top: 135px; }

.option-window {
  height: 348px;
  background-image:
    url(assets/interface/op2_back1.png),
    url(assets/interface/op1_back2.png),
    url(assets/interface/op1_back3.jpg),
    url(assets/interface/op1_back4.jpg),
    url(assets/interface/op1_stone.jpg);
  background-position: center top, center bottom, left 65px, right 65px, center;
}
.option-window h2 {
  position: absolute;
  left: 0;
  top: 10px;
  width: 213px;
  color: #eee;
  font: 12px/18px Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
}
.option-check {
  position: absolute;
  left: 52px;
  width: 146px;
  height: 16px;
  color: #eee;
  font: 12px/16px Arial, sans-serif;
}
.option-check input {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  appearance: none;
  background: url(assets/interface/op2_ch.png) 0 0 / 16px 32px no-repeat;
  box-shadow: none;
  cursor: inherit;
}
.option-check input:checked { background-position: 0 -16px; }
.option-check input:focus-visible { filter: brightness(1.35); }
.option-check span { position: absolute; left: 24px; top: 0; white-space: nowrap; }
.option-auto { top: 52px; }
.option-whisper { top: 93px; }
.option-slide { top: 134px; }
.option-range {
  position: absolute;
  left: 52px;
  width: 98px;
  color: #eee;
  font: 12px/16px Arial, sans-serif;
}
.option-range > span { position: absolute; left: 0; top: -20px; width: 112px; white-space: nowrap; }
.option-range output { position: absolute; left: 82px; top: -20px; width: 16px; color: #eee; text-align: right; }
.option-range input {
  width: 98px;
  height: 13px;
  padding: 0;
  border: 0;
  appearance: none;
  background: url(assets/interface/op2_volume1.png) 0 0 / 98px 13px no-repeat;
  box-shadow: none;
  cursor: inherit;
}
.option-range input:focus { border: 0; box-shadow: none; }
.option-range input::-webkit-slider-runnable-track { height: 13px; background: transparent; }
.option-range input::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin: 0;
  border: 0;
  appearance: none;
  background: url(assets/interface/op2_volume3.png) 0 0 / 13px 13px no-repeat;
}
.option-range input::-moz-range-track { height: 13px; background: transparent; }
.option-range input::-moz-range-thumb { width: 13px; height: 13px; border: 0; background: url(assets/interface/op2_volume3.png) 0 0 / 13px 13px no-repeat; }
.option-effect { top: 198px; }
.option-render { top: 259px; }
#optionClose { top: 301px; }

.exit-window {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 352px;
  height: 113px;
  transform: translate(-50%, -50%);
  background: url(assets/interface/message_back.png) 0 0 / 352px 113px no-repeat;
}
#exitMessage {
  position: absolute;
  left: 25px;
  top: 47px;
  width: 302px;
  color: #eee;
  font: 12px/19px Arial, sans-serif;
  text-align: center;
}
.exit-screen {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: grid;
  place-items: center;
  background: #000;
  pointer-events: auto;
}
.exit-screen p { color: #8e7a5d; font: 12px/1 Arial, sans-serif; letter-spacing: .25em; }