/* world-and-entry.css */ /* World, animation and entry screens only. Game UI rules removed. */ :root{color-scheme: dark; --bg: #0c0c0d; --panel: #1c1a19; --panel2: #29231d; --line: #665032; --gold: #e6c28a; --muted: #a9a097; --white: #f5ead7;} *{box-sizing: border-box;} html{scroll-behavior: smooth;} body{margin: 0px; color: var(--white); font-family: system-ui, -apple-system, "Microsoft JhengHei", sans-serif; background: rgb(12, 12, 13);} button, input, select{font: inherit;} button{cursor: pointer;} button:disabled{cursor: not-allowed; opacity: 0.45;} [hidden]{display: none !important;} .screen{min-height: 100vh;} .auth-screen, .select-screen{background: radial-gradient(at 50% 28%, rgba(87, 65, 38, 0.44), transparent 52%), linear-gradient(130deg, rgb(16, 14, 12), rgb(39, 32, 22) 48%, rgb(13, 12, 13)); display: flex; justify-content: center; align-items: center; padding: 30px 16px;} .auth-card{width: min(100%, 400px); padding: 34px 30px 28px; text-align: center; border: 1px solid rgb(147, 112, 69); border-radius: 8px; background: linear-gradient(rgba(37, 30, 26, 0.85), rgba(20, 19, 19, 0.937)); box-shadow: rgba(0, 0, 0, 0.733) 0px 25px 80px, rgba(166, 126, 33, 0.063) 0px 0px 40px inset;} .crest{font-size: 56px; color: var(--gold); text-shadow: rgb(199, 162, 101) 0px 0px 25px;} .auth-card h1, .select-wrap h1{margin: 0px; font-size: 34px; letter-spacing: 6px; color: var(--gold); font-family: serif; text-shadow: rgb(165, 110, 64) 0px 2px 16px;} .subtitle{font-size: 12px; letter-spacing: 2px; color: rgb(196, 165, 121);} .ornament{margin: 18px 0px; color: rgb(173, 129, 78);} .auth-card h2, .create-panel h2{font-size: 17px; font-weight: 500; margin: 18px 0px;} .auth-card label, .create-panel label{display: block; text-align: left; margin: 15px 0px; font-size: 13px; color: rgb(210, 185, 144);} input, select{display: block; width: 100%; background: rgb(16, 15, 15); border: 1px solid rgb(116, 91, 61); border-radius: 4px; color: rgb(249, 233, 209); padding: 13px; margin-top: 7px; outline: none;} input:focus, select:focus{border-color: rgb(231, 195, 141);} .gold, .ghost, .blue{border: 1px solid rgb(140, 101, 58); border-radius: 4px; padding: 12px 16px; font-weight: 700; color: rgb(255, 255, 255);} .gold{background: linear-gradient(rgb(176, 138, 81), rgb(118, 81, 39)); color: rgb(255, 241, 212);} .ghost{background: rgb(37, 33, 30); border-color: rgb(99, 80, 58);} .blue{background: rgb(48, 74, 89); border-color: rgb(88, 117, 140);} .full{display: block; width: 100%; margin-top: 12px;} .error{color: rgb(255, 153, 145); min-height: 16px; font-size: 13px;} .footnote{font-size: 11px; color: rgb(167, 155, 135); margin-top: 22px;} .select-wrap{width: min(100%, 520px); text-align: center;} .select-wrap h1{font-size: 29px;} .slots{margin: 30px 0px 22px; display: grid; gap: 14px;} .slot{width: 100%; text-align: left; display: flex; align-items: center; gap: 17px; padding: 18px; background: linear-gradient(100deg, rgb(50, 42, 34), rgb(26, 23, 21)); border: 1px solid rgb(118, 91, 60); border-radius: 6px; color: rgb(238, 224, 200);} .slot:hover{border-color: rgb(212, 172, 110); background: rgb(56, 48, 38);} .slot-icon{width: 60px; height: 65px; display: grid; place-items: center; font-size: 36px; background: rgb(24, 21, 18); border: 1px solid rgb(112, 88, 59); color: rgb(228, 194, 139);} .slot-icon.empty{font-size: 30px; color: rgb(132, 116, 94);} .slot-info{flex: 1 1 0%; display: grid; gap: 7px;} .slot-info b{font-size: 18px;} .slot-info small, .slot-action{color: rgb(187, 169, 142); font-size: 12px;} .create-panel{padding: 18px 24px 25px; background: rgb(27, 23, 21); border: 1px solid rgb(138, 103, 62); margin-bottom: 15px;} .two{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;} .game-screen{background: radial-gradient(circle at 50% 0%, rgb(52, 39, 25) 0%, rgb(16, 15, 15) 48%);} .game-wrap{max-width: 650px; margin: auto; padding: 0px 12px 95px;} .topline{height: 49px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgb(85, 67, 44);} .brand{font-family: serif; font-size: 19px; color: var(--gold); font-weight: 700;} .brand small{font: 11px system-ui; color: rgb(172, 146, 114);} #connection{font-size: 11px; color: rgb(156, 204, 141);} .hp{background: linear-gradient(90deg, rgb(141, 41, 42), rgb(230, 92, 76));} .mp{background: linear-gradient(90deg, rgb(38, 79, 147), rgb(100, 166, 240));} .exp{background: linear-gradient(90deg, rgb(155, 121, 51), rgb(241, 198, 107));} .arena{border: 1px solid rgb(92, 73, 50); background: rgb(27, 25, 23); margin-top: 12px; border-radius: 5px; overflow: hidden;} .arena-top{display: flex; justify-content: space-between; align-items: center; padding: 12px 13px; background: rgb(43, 36, 29); border-bottom: 1px solid rgb(87, 67, 44); color: rgb(229, 194, 140); font-size: 14px;} .arena-top span{color: rgb(183, 170, 155); font-size: 12px;} .arena-top span.hunting{color: rgb(140, 211, 140);} .battlefield{height: 248px; position: relative; display: flex; justify-content: space-evenly; align-items: end; padding: 18px 16px 20px; overflow: hidden; background: radial-gradient(at 50% 100%, rgb(102, 82, 56) 0%, rgb(41, 39, 32) 35%, transparent 65%), linear-gradient(rgb(17, 27, 28), rgb(30, 44, 41) 45%, rgb(37, 39, 30) 75%, rgb(52, 41, 31)); isolation: isolate;} .battlefield::after{content: ""; position: absolute; bottom: 26px; left: 8%; width: 84%; height: 30px; border-radius: 50%; background: rgba(11, 12, 11, 0.5); filter: blur(13px); z-index: -1;} .rune{position: absolute; color: rgba(169, 188, 144, 0.44); font-size: 40px;} .rune-one{top: 15px; left: 14%;} .rune-two{top: 45px; right: 12%;} .combatant{width: 36%; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 7px; z-index: 2;} .unit-label{font-size: 12px; color: rgb(231, 215, 186); text-shadow: rgb(0, 0, 0) 1px 2px 4px;} .vs{align-self: center; color: rgb(215, 178, 118); font-size: 25px; text-shadow: rgb(182, 140, 86) 0px 0px 12px;} .sprite{width: 100px; height: 143px; position: relative; transform-origin: 50% 90%; animation: 2.5s ease-in-out 0s infinite normal none running idle;} .aura{position: absolute; bottom: 1px; left: 3px; width: 94px; height: 24px; border-radius: 50%; border: 2px solid rgb(160, 184, 163); box-shadow: rgba(197, 209, 171, 0.467) 0px 0px 14px;} .sprite-body{position: absolute; bottom: 13px; left: 28px; width: 47px; height: 81px; border: 3px solid rgb(169, 177, 189); border-radius: 17px 17px 12px 12px; background: linear-gradient(110deg, rgb(74, 84, 96), rgb(155, 157, 161), rgb(52, 57, 68)); box-shadow: rgba(0, 0, 0, 0.533) 0px 0px 12px inset;} .sprite-head{position: absolute; top: -38px; left: 6px; width: 31px; height: 35px; border: 3px solid rgb(166, 173, 181); border-radius: 12px 12px 7px 7px; background: linear-gradient(rgb(113, 122, 139), rgb(183, 177, 162)); box-shadow: rgb(0, 0, 0) 0px 0px 8px;} .sprite-weapon{position: absolute; left: 52px; top: -16px; width: 7px; height: 98px; transform: rotate(22deg); background: linear-gradient(90deg, rgb(179, 179, 174), rgb(255, 255, 255), rgb(119, 119, 119)); border-radius: 5px; box-shadow: rgba(238, 238, 238, 0.467) 0px 0px 7px;} .sprite-weapon::before{content: ""; position: absolute; left: -12px; top: 58px; width: 30px; height: 6px; background: rgb(198, 161, 92);} .sprite-cloak{position: absolute; left: -9px; top: 7px; width: 16px; height: 78px; transform: rotate(10deg); background: rgb(91, 41, 50); border-radius: 7px;} .elf .sprite-body{background: linear-gradient(110deg, rgb(59, 92, 70), rgb(165, 195, 149), rgb(56, 84, 60)); border-color: rgb(135, 164, 134);} .elf .sprite-head{background: rgb(185, 164, 138); border-color: rgb(103, 142, 101);} .elf .sprite-weapon{width: 24px; height: 83px; border-width: 4px 4px 4px medium; border-style: solid solid solid none; border-color: rgb(168, 125, 77) rgb(168, 125, 77) rgb(168, 125, 77) currentcolor; border-image: none; border-radius: 0px 80% 80% 0px; background: none; transform: rotate(-15deg); box-shadow: none;} .elf .sprite-weapon::before{height: 2px; left: -8px; top: 39px; width: 29px; background: rgb(223, 215, 188);} .elf .sprite-cloak{background: rgb(59, 113, 81);} .mage .sprite-body{background: linear-gradient(110deg, rgb(38, 60, 123), rgb(89, 102, 173), rgb(35, 41, 86)); border-color: rgb(135, 150, 209);} .mage .sprite-head{background: rgb(224, 187, 163); border-color: rgb(76, 82, 153);} .mage .sprite-weapon{background: linear-gradient(90deg, rgb(83, 53, 30), rgb(189, 138, 84), rgb(76, 43, 24)); width: 7px; height: 108px; transform: rotate(-12deg);} .mage .sprite-weapon::before{content: "✦"; top: -29px; left: -12px; font-size: 29px; color: rgb(157, 231, 255); background: none;} .mage .sprite-cloak{background: rgb(36, 46, 117);} .monster-sprite{width: 90px; height: 118px; margin-bottom: 12px; position: relative; background: radial-gradient(at 40% 25%, rgb(149, 167, 101), rgb(74, 105, 65) 50%, rgb(39, 61, 44)); border: 3px solid rgb(121, 144, 94); border-radius: 42% 42% 30% 30%; box-shadow: rgb(19, 39, 27) -14px -8px 20px inset, rgba(0, 0, 0, 0.533) 0px 9px 8px; animation: 2.8s ease-in-out 0s infinite normal none running idle;} .monster-sprite::before, .monster-sprite::after{content: ""; position: absolute; top: -16px; border-bottom: 32px solid rgb(99, 127, 74); border-left: 13px solid transparent; border-right: 13px solid transparent;} .monster-sprite::before{left: -12px; transform: rotate(-25deg);} .monster-sprite::after{right: -12px; transform: rotate(25deg);} .monster-eyes{position: absolute; top: 36px; left: 18px; letter-spacing: 8px; color: rgb(247, 206, 100); text-shadow: rgb(252, 217, 107) 0px 0px 6px;} .monster-mouth{position: absolute; top: 58px; left: 37px; color: rgb(39, 30, 22); font-size: 22px;} .sprite.attacking{animation: 0.6s ease-in-out 0s 1 normal none running slash;} .sprite.casting{animation: 0.8s ease-in-out 0s 1 normal none running cast;} .monster-sprite.hit{animation: 0.5s ease-in-out 0s 1 normal none running hit;} .projectile{position: absolute; left: 35%; bottom: 100px; opacity: 0; font-size: 34px; color: rgb(167, 214, 255); text-shadow: rgb(164, 215, 255) 0px 0px 15px; z-index: 5;} .projectile.arrow{color: rgb(242, 216, 156);} .projectile.flying{animation: 0.6s ease-in 0s 1 normal forwards running fly;} .damage-number{position: absolute; right: 20%; top: 60px; color: rgb(255, 179, 75); font-weight: 900; font-size: 29px; text-shadow: rgb(125, 36, 24) 1px 2px 0px, rgb(255, 103, 23) 0px 0px 12px; opacity: 0; z-index: 8;} .damage-number.show{animation: 0.85s ease-out 0s 1 normal forwards running damage;} .battle-controls{display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 8px 6px;} .battle-controls button{font-size: 12px; padding: 10px 11px;} .quick-note{color: rgb(167, 156, 142); text-align: center; font-size: 10px; padding: 6px 8px 13px;} .tabs{display: flex; gap: 7px; padding: 10px;} .tab{padding: 7px 15px; background: rgb(37, 33, 28); color: rgb(195, 174, 145); border: 1px solid rgb(88, 70, 48); border-radius: 3px; font-size: 12px;} .tab.active{background: rgb(117, 86, 50); color: rgb(255, 255, 255);} .zone-icon{font-size: 25px;} .detail-row{display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid rgb(61, 52, 43);} .muted{color: rgb(169, 158, 142); font-size: 12px; line-height: 1.7;} .stat-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px;} .stat-grid span{color: rgb(172, 158, 139);} .stat-grid b{text-align: right;} .log-row{font-size: 12px; padding: 8px 0px; border-bottom: 1px solid rgb(57, 49, 41); color: rgb(215, 199, 173);} .toast{position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: rgb(72, 53, 38); color: rgb(255, 240, 217); border: 1px solid rgb(179, 140, 88); padding: 12px 16px; border-radius: 5px; opacity: 0; pointer-events: none; z-index: 40; transition: opacity 0.2s; white-space: nowrap; font-size: 13px;} .toast.visible{opacity: 1;} @keyframes idle { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } @keyframes slash { 0% { transform: translateX(0px) rotate(0deg); } 35% { transform: translateX(29px) rotate(20deg); } 60% { transform: translateX(18px) rotate(-18deg); } 100% { transform: translateX(0px) rotate(0deg); } } @keyframes cast { 0% { filter: brightness(1); transform: translateY(0px); } 40% { filter: brightness(2) drop-shadow(rgb(159, 227, 255) 0px 0px 16px); transform: translateY(-12px); } 100% { filter: brightness(1); transform: translateY(0px); } } @keyframes hit { 0%, 100% { transform: translateX(0px); filter: brightness(1); } 30% { transform: translateX(13px); filter: brightness(2) sepia(1) saturate(6); } 60% { transform: translateX(-8px); } } @keyframes fly { 0% { left: 35%; opacity: 1; transform: scale(0.5); } 80% { left: 67%; opacity: 1; transform: scale(1.5); } 100% { left: 70%; opacity: 0; } } @keyframes damage { 0% { opacity: 0; transform: translateY(15px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-55px); } } @media (min-width: 700px){.game-wrap{border-left: 1px solid rgb(56, 46, 37); border-right: 1px solid rgb(56, 46, 37);} .battlefield{height: 290px;} .sprite{transform: scale(1.12);} } @media (max-width: 390px){.game-wrap{padding-left: 7px; padding-right: 7px;} .battle-controls button{font-size: 11px; padding: 9px;} .battlefield{height: 220px;} .sprite{transform: scale(0.85);} } .sprite.realistic{width: min(150px, 100%); height: 202px; background-position: center bottom; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(rgba(0, 0, 0, 0.667) 0px 8px 5px); animation: 2.3s ease-in-out 0s infinite normal none running realIdle;} .sprite.realistic .sprite-body, .sprite.realistic .aura{display: none;} .slot-icon{overflow: hidden;} .slot-art{height: 100%; width: 100%; object-fit: contain; object-position: center bottom;} .sprite.realistic.attacking{animation: 0.65s ease-in-out 0s 1 normal none running realSlash;} .sprite.realistic.casting{animation: 0.9s ease-in-out 0s 1 normal none running realCast;} @keyframes realIdle { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-3px); } } @keyframes realSlash { 0%, 100% { transform: translateX(0px) rotate(0deg); } 45% { transform: translateX(24px) rotate(8deg); } 65% { transform: translateX(12px) rotate(-4deg); } } @keyframes realCast { 0%, 100% { transform: translateY(0px); filter: brightness(1); } 45% { transform: translateY(-7px); filter: brightness(1.8) drop-shadow(rgb(121, 185, 255) 0px 0px 20px); } } @media (max-width: 390px){.sprite.realistic{height: 175px;} } #monsterSprite.monster-sprite{width: 120px; height: 150px; margin: 0px; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center bottom; border: 0px; border-radius: 0px; box-shadow: none; image-rendering: auto;} #monsterSprite.monster-sprite::before, #monsterSprite.monster-sprite::after{display: none !important; content: none !important;} .monster-hp-track{width: 116px; height: 9px; background: rgb(52, 32, 28); border: 1px solid rgb(133, 100, 72); border-radius: 5px; overflow: hidden;} .monster-hp-fill{height: 100%; width: 100%; background: linear-gradient(90deg, rgb(174, 40, 42), rgb(240, 96, 86)); transition: width 0.25s;} .monster-hp-text{font-size: 11px; color: rgb(241, 212, 181); font-variant-numeric: tabular-nums;} .battlefield{justify-content: space-between; gap: 3px; padding-left: 8px; padding-right: 8px;} .battlefield > .combatant{width: 28%; flex: 0 0 28%;} .monster-group{display: flex; align-items: end; justify-content: space-around; gap: 4px; width: 66%; height: 100%; z-index: 2;} .monster-card{width: 33.333%; min-width: 0px; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 5px; text-align: center;} .monster-card .monster-sprite{width: 100%; height: 115px; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center bottom; box-shadow: none; border: 0px; flex-shrink: 0;} .monster-card .monster-sprite::before, .monster-card .monster-sprite::after{display: none !important;} .monster-card .unit-label{font-size: 11px; min-height: 26px; line-height: 1.2; display: grid; place-items: center; overflow-wrap: anywhere;} .monster-card .monster-hp-track{width: 100%; max-width: 90px; height: 8px;} .monster-card .monster-hp-text{font-size: 10px; white-space: nowrap;} .empty-monsters{align-self: center; color: rgb(187, 169, 142); font-size: 12px; text-align: center; width: 100%;} .battlefield .vs{font-size: 17px;} @media (max-width: 390px){.monster-card .monster-sprite{height: 95px;} .monster-card .unit-label{font-size: 10px;} } .sprite.shooting{animation: 0.5s ease-in-out 0s 1 normal none running bowdraw !important;} .sprite.hurt{animation: 0.25s ease-out 0s 1 normal none running heroHit !important;} @keyframes bowdraw { 0%, 100% { transform: translateX(0px) rotate(0deg); } 35% { transform: translateX(-10px) rotate(-7deg); } 60% { transform: translateX(-13px) rotate(-9deg); } } @keyframes heroHit { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(2) sepia(1) saturate(5); } } .projectile{left: 29%; top: 48%; bottom: auto; pointer-events: none; z-index: 9;} .projectile.flying{animation: 0.43s ease-out 0s 1 normal forwards running aimedShot !important;} @keyframes aimedShot { 0% { left: 29%; top: 48%; opacity: 1; transform: scale(0.7); } 85% { left: var(--target-x,70%); top: var(--target-y,45%); opacity: 1; transform: scale(1.3); } 100% { left: var(--target-x,70%); top: var(--target-y,45%); opacity: 0; transform: scale(1); } } .sprite.realistic.shooting{animation: 0.5s ease-in-out 0s 1 normal none running bowdraw !important;} .sprite.realistic.attacking{animation: 0.55s ease-in-out 0s 1 normal none running realSlash !important;} .sprite.realistic.casting{animation: 0.65s ease-in-out 0s 1 normal none running realCast !important;} .monster-card .monster-sprite{background-color: transparent !important;} .arena[hidden]{display: none !important;} .attribute-creator{margin: 14px 0px; padding: 12px; border: 1px solid rgb(112, 80, 43); border-radius: 8px;} .attribute-creator h3{color: rgb(228, 188, 126);} .creation-stat{display: flex; align-items: center; gap: 8px; margin: 6px 0px;} .creation-stat span{flex: 1 1 0%;} .creation-stat strong{min-width: 26px; text-align: center; color: rgb(243, 210, 156);} .creation-stat button{min-width: 34px; padding: 5px;} .attribute-creator .muted{font-size: 12px;} .character-slot-wrap{position: relative; margin-bottom: 12px;} .character-slot-wrap > .slot{width: 100%; margin-bottom: 0px;} .delete-character{display: block; margin: 6px 0px 0px auto; padding: 7px 12px; border: 1px solid rgb(115, 69, 60); border-radius: 6px; background: rgb(41, 25, 23); color: rgb(242, 169, 160); cursor: pointer; font-size: 12px;} .delete-character:hover{background: rgb(71, 32, 29); color: rgb(255, 255, 255);} .select-wrap:has(.lineage-creator:not([hidden])){width: min(100%, 1120px);} .select-wrap:has(.lineage-creator:not([hidden])) .slots{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; margin: 15px 0px;} .select-wrap:has(.lineage-creator:not([hidden])) .slot{padding: 8px; gap: 7px;} .select-wrap:has(.lineage-creator:not([hidden])) .slot-icon{width: 42px; min-width: 42px; height: 48px;} .select-wrap:has(.lineage-creator:not([hidden])) .slot-info b{font-size: 12px;} .select-wrap:has(.lineage-creator:not([hidden])) .slot-action{display: none;} .lineage-creator{position: relative; text-align: left; margin: 10px auto 20px; padding: 15px 20px 14px; border: 2px ridge rgb(151, 117, 72); border-radius: 8px; background: radial-gradient(at 52% 25%, rgb(58, 46, 34) 0%, rgb(27, 23, 22) 52%, rgb(11, 11, 13) 100%); box-shadow: rgb(0, 0, 0) 0px 0px 45px inset, rgba(0, 0, 0, 0.667) 0px 12px 35px; overflow: hidden;} .lineage-creator::before, .lineage-creator::after{content: "❦"; position: absolute; top: 3px; color: rgb(173, 138, 88); font-size: 30px; text-shadow: rgb(199, 166, 117) 0px 0px 8px; pointer-events: none;} .lineage-creator::before{left: 7px;} .lineage-creator::after{right: 7px; transform: scaleX(-1);} .lineage-heading{text-align: center; color: rgb(226, 194, 145); letter-spacing: 5px; font-family: serif; font-size: 19px; text-shadow: rgb(203, 161, 101) 0px 0px 10px; margin: 0px 0px 12px;} .lineage-layout{display: grid; grid-template-columns: 32% 35% 33%; min-height: 470px; gap: 0px;} .lineage-left{display: flex; flex-direction: column; gap: 12px; padding: 7px 9px 5px 0px;} .lineage-lore{flex: 1 1 0%; min-height: 230px; border: 9px ridge rgb(116, 89, 61); border-radius: 13px; padding: 19px 12px; background: radial-gradient(rgb(50, 41, 31), rgb(24, 21, 19)); box-shadow: rgb(0, 0, 0) 0px 0px 25px inset, rgba(184, 149, 70, 0.15) 0px 0px 10px; color: rgb(214, 185, 147);} .lineage-frame-title{text-align: center; font-size: 17px; color: rgb(242, 211, 162); margin-bottom: 20px;} .lineage-lore p{line-height: 1.85; font-size: 13px;} .lineage-lore-symbol{text-align: center; color: rgb(157, 121, 78); margin-top: 20px;} .lineage-bonuses{border: 6px ridge rgb(117, 91, 60); border-radius: 8px; background: rgb(15, 14, 14); padding: 7px;} .lineage-bonuses h3{font-size: 14px; text-align: center; color: rgb(214, 196, 165); letter-spacing: 2px; margin: 3px 0px 9px;} .lineage-bonus-row{display: flex; justify-content: space-between; border: 1px solid rgb(73, 57, 45); padding: 4px 6px; font-size: 12px; color: rgb(223, 199, 168);} .lineage-bonus-row b{color: rgb(245, 226, 193);} .lineage-center{position: relative; min-height: 470px; background: radial-gradient(at 50% 45%, rgba(94, 76, 52, 0.19), transparent 63%); display: flex; align-items: center; flex-direction: column;} .lineage-crown{font-size: 40px; color: rgb(167, 136, 93); line-height: 1; text-shadow: rgb(200, 164, 90) 0px 0px 14px;} .lineage-class-choices{display: flex; gap: 8px; margin: 10px 0px;} .lineage-class, .lineage-sex{background: rgb(36, 30, 25); border: 1px solid rgb(104, 80, 52); border-radius: 5px; color: rgb(173, 150, 120); min-width: 45px; padding: 8px; font-size: 22px;} .lineage-class.chosen, .lineage-sex.chosen{color: rgb(255, 224, 160); border-color: rgb(219, 173, 99); background: rgb(69, 51, 31); box-shadow: rgba(199, 156, 78, 0.333) 0px 0px 14px;} .lineage-character-stand{flex: 1 1 0%; min-height: 295px; width: 100%; display: flex; justify-content: center; align-items: center; position: relative;} .lineage-character-stand img{position: relative; z-index: 2; max-height: 285px; max-width: 88%; object-fit: contain; image-rendering: auto; filter: drop-shadow(rgb(0, 0, 0) 0px 9px 9px) drop-shadow(rgba(180, 160, 122, 0.333) 0px 0px 13px);} .lineage-platform{position: absolute; bottom: 12px; width: 70%; height: 37px; border: 3px solid rgb(139, 120, 85); border-radius: 50%; box-shadow: rgba(181, 161, 110, 0.333) 0px 0px 18px, rgba(181, 161, 110, 0.267) 0px 0px 18px inset; transform: perspective(100px) rotateX(30deg);} .lineage-sex-choices{display: flex; gap: 12px; margin-bottom: 9px;} .lineage-sex{font-size: 13px; min-width: 67px;} .lineage-right{padding: 20px 0px 10px 10px; display: flex; flex-direction: column; justify-content: center;} .lineage-attribute-title{text-align: center; color: rgb(199, 173, 133); letter-spacing: 2px; margin-bottom: 12px; font-size: 17px;} .lineage-attribute-title small{display: block; color: rgb(245, 200, 125); font-size: 12px; letter-spacing: 0px; margin-top: 6px;} .lineage-right #creationStats{display: grid; gap: 5px;} .lineage-right .creation-stat{display: grid; grid-template-columns: minmax(75px, 1fr) 27px 30px 27px; gap: 5px; margin: 0px; align-items: center;} .lineage-right .creation-stat span{font-size: 13px; color: rgb(234, 209, 168);} .lineage-right .creation-stat strong{font-size: 16px; color: rgb(248, 220, 173);} .lineage-right .creation-stat button{min-width: 0px; width: 27px; height: 26px; padding: 0px; border: 1px solid rgb(103, 82, 58); border-radius: 2px; background: rgb(57, 49, 42); color: rgb(243, 214, 163);} .lineage-right .creation-stat button:disabled{opacity: 0.25;} .lineage-auto{text-align: center; margin: 12px 0px 6px;} .lineage-auto button{font-size: 12px; padding: 7px 12px;} .lineage-right .lineage-name{margin: 8px 0px; font-size: 13px; text-align: center;} .lineage-name input{font-size: 13px; padding: 10px;} .lineage-actions{display: flex; gap: 8px;} .lineage-actions button{flex: 1 1 0%; padding: 10px 4px; font-size: 13px;} .lineage-legal{text-align: center; font-size: 10px; color: rgb(155, 140, 117); margin-top: 12px;} .lineage-native{display: none !important;} @media (max-width: 760px){.select-wrap:has(.lineage-creator:not([hidden])) .slots{grid-template-columns: 1fr;} .lineage-layout{grid-template-columns: 1fr 1fr;} .lineage-left{grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;} .lineage-lore{min-height: 160px;} .lineage-center{min-height: 400px;} .lineage-right{padding: 12px 0px 12px 8px;} .lineage-creator{padding: 13px 10px;} } @media (max-width: 480px){.lineage-layout{grid-template-columns: 1fr;} .lineage-left{grid-template-columns: 1fr 1fr;} .lineage-lore{padding: 9px 6px; min-height: 130px; border-width: 4px;} .lineage-lore p{font-size: 11px;} .lineage-bonuses{border-width: 3px;} .lineage-center{min-height: 350px;} .lineage-character-stand{min-height: 230px;} .lineage-character-stand img{max-height: 220px;} .lineage-right{padding: 14px 20px;} .lineage-heading{font-size: 14px; letter-spacing: 2px;} } .item-pixel-image{object-fit: contain; image-rendering: pixelated; display: block; max-width: 100%; max-height: 100%;} .equip-item-img{width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated;} .item-icon-missing{color: rgb(154, 135, 107); font-size: 24px; font-weight: 600;} .equip-empty-img{display: block; width: 42px; height: 42px; max-width: 82%; max-height: 82%; opacity: 0.66; filter: drop-shadow(rgb(0, 0, 0) 0px 1px 2px);} @media (max-width: 390px){.equip-empty-img{width: 34px; height: 34px;} } .arena{display: block;} @media (max-width: 600px){.battlefield{height: 210px;} .arena .quick-note{display: none;} } .equip-empty-img{width: 46px; height: 46px; max-width: 85%; max-height: 85%; opacity: 0.86; filter: drop-shadow(rgb(0, 0, 0) 0px 2px 3px);} .sprite.realistic.mage.job-basic-attack.attacking{transform-origin: 50% 82%; animation: 0.54s cubic-bezier(0.2, 0.65, 0.4, 1) 0s 1 normal none running erMageBasic !important;} .sprite.realistic.knight.job-basic-attack.attacking{transform-origin: 50% 85%; animation: 0.54s cubic-bezier(0.2, 0.65, 0.4, 1) 0s 1 normal none running erKnightBasic !important;} .sprite.realistic.elf.job-basic-attack.shooting{transform-origin: 50% 85%; animation: 0.56s ease-in-out 0s 1 normal none running erElfBasic !important;} @keyframes erMageBasic { 0%, 100% { transform: translateX(0px) rotate(0deg); } 22% { transform: translateX(-3px) rotate(-3deg); } 53% { transform: translateX(11px) rotate(7deg); } 72% { transform: translateX(4px) rotate(2deg); } } @keyframes erKnightBasic { 0%, 100% { transform: translateX(0px) rotate(0deg); } 25% { transform: translateX(-5px) rotate(-7deg); } 52% { transform: translateX(15px) rotate(10deg); } 76% { transform: translateX(5px) rotate(2deg); } } @keyframes erElfBasic { 0%, 100% { transform: translateX(0px) rotate(0deg); } 25%, 55% { transform: translateX(-6px) rotate(-3deg); } 70% { transform: translateX(3px) rotate(1deg); } } #gameScreen .battlefield:not(.v3-active){display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0px !important; padding: 32px 7% 82px 8% !important; overflow: hidden !important;} #gameScreen .battlefield:not(.v3-active) > .combatant{will-change: transform; width: 24% !important; flex: 0 0 24% !important; align-self: center !important; justify-content: center !important; position: relative !important; z-index: 6 !important; transition: transform 190ms ease-out !important;} #gameScreen .battlefield:not(.v3-active) > .vs{display: none !important;} #gameScreen .battlefield:not(.v3-active) > .monster-group{width: 32% !important; flex: 0 0 32% !important; height: 100% !important; min-height: 0px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-evenly !important; gap: 7px !important; z-index: 2 !important;} #gameScreen .battlefield:not(.v3-active) .monster-card{width: 100% !important; max-width: 175px !important; min-height: 0px !important; flex: 1 1 0px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 2px !important; overflow: visible !important;} #gameScreen .battlefield:not(.v3-active) .monster-card .monster-sprite{height: clamp(38px, 10vh, 90px) !important; width: 100% !important; margin: 0px !important; background-size: contain !important; background-position: center bottom !important; flex: 0 1 auto !important;} #gameScreen .battlefield:not(.v3-active) .monster-card .unit-label{min-height: 0px !important; font-size: 12px !important; line-height: 1.25 !important; display: block !important;} #gameScreen .battlefield:not(.v3-active) .monster-card .monster-hp-track{height: 7px !important; max-width: 130px !important; flex-shrink: 0 !important;} #gameScreen .battlefield:not(.v3-active) .monster-card .monster-hp-text{font-size: 10px !important; flex-shrink: 0 !important;} #gameScreen .battlefield:not(.v3-active) .monster-card.er317-target .monster-hp-track{box-shadow: rgb(229, 182, 91) 0px 0px 6px !important;} #gameScreen .battlefield:not(.v3-active) .combatant.er317-moving{z-index: 8 !important;} @media (max-width: 700px){#gameScreen .battlefield:not(.v3-active){padding-left: 3% !important; padding-right: 4% !important;} #gameScreen .battlefield:not(.v3-active) > .monster-group{width: 42% !important; flex-basis: 42% !important;} #gameScreen .battlefield:not(.v3-active) > .combatant{width: 27% !important; flex-basis: 27% !important;} } #gameScreen .monster-card.er322-empty-slot{visibility: hidden !important; pointer-events: none !important;} #gameScreen .monster-card .monster-sprite:not(.er323-hit){filter: none !important;} #gameScreen .monster-card .monster-sprite.er323-hit{animation: 0.34s ease-out 0s 1 normal none running er323TargetHit !important;} @keyframes er323TargetHit { 0%, 100% { filter: none; transform: translateX(0px); } 35% { filter: brightness(1.9) sepia(0.55) saturate(2.5); transform: translateX(5px); } 70% { filter: brightness(1.2); transform: translateX(-3px); } } @media (min-width: 600px){html, body{margin: 0px; width: 100%; overflow: hidden;} body:has(#gameScreen:not([hidden])){overflow: hidden;} #gameScreen.game-screen:not([hidden]){position: fixed !important; inset: 0px !important; display: block !important; width: 100vw !important; height: 100dvh !important; min-height: 0px !important; background: rgb(23, 21, 19) !important; overflow: hidden !important;} #gameScreen .game-wrap{position: relative !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0px !important; padding: 0px !important; display: block !important; overflow: hidden !important;} #gameScreen .topline{position: absolute; top: 0px; left: 0px; right: 0px; height: 32px; margin: 0px; padding: 0px 12px; z-index: 30; background: rgb(26, 23, 20); border-bottom: 1px solid rgb(114, 92, 63);} #gameScreen .arena:not([hidden]){position: absolute !important; inset: 32px 0px clamp(155px, 20vh, 220px) !important; margin: 0px !important; padding: 0px !important; display: block !important; overflow: hidden !important; border: 0px !important; background: rgb(41, 39, 37) !important;} #gameScreen .battlefield{background-image: none; position: absolute !important; inset: 0px !important; width: 100% !important; height: 100% !important; min-height: 0px !important; margin: 0px !important; padding: 3% 12% !important; display: flex !important; align-items: center !important; justify-content: space-around !important; background-color: rgb(41, 39, 37) !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important;} #gameScreen .battlefield .combatant{max-width: 260px;} #gameScreen .arena-top{position: absolute !important; top: 9px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 9 !important; margin: 0px !important; padding: 5px 12px !important; background: rgba(23, 19, 15, 0.81) !important; border: 1px solid rgb(149, 114, 75) !important;} #gameScreen .battle-controls{position: absolute !important; bottom: 8px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10 !important; display: flex !important; gap: 5px !important; padding: 4px !important; background: rgba(24, 21, 17, 0.8) !important;} #gameScreen .quick-note{display: none !important;} } @media (min-width: 600px){#gameScreen .battlefield{background-image: none; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;} #gameScreen .arena .rune{opacity: 0.25;} } @media (min-width: 600px){#gameScreen .topline{height: 24px !important; background: rgb(11, 12, 12) !important; border-bottom: 1px solid rgb(89, 70, 46) !important;} #gameScreen .topline .brand{font-size: 14px !important;} #gameScreen .arena:not([hidden]){top: 24px !important; bottom: clamp(210px, 27vh, 300px) !important; background-color: rgb(33, 28, 24) !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important;} #gameScreen .battlefield{background: none transparent !important; padding: 4% 14% !important;} #gameScreen .arena::after{content: ""; position: absolute; inset: 0px; pointer-events: none; background: radial-gradient(transparent 35%, rgba(0, 0, 0, 0.333) 100%); z-index: 0;} #gameScreen .arena-top{z-index: 9 !important; top: 9px !important; padding: 4px 10px !important; background: rgba(11, 11, 11, 0.85) !important;} #gameScreen .battlefield .rune{display: none !important;} #gameScreen .battle-controls{opacity: 0.86; transition: opacity 0.2s; bottom: 10px !important; z-index: 11 !important;} #gameScreen .battle-controls:hover{opacity: 1;} #gameScreen .classic-map-mini{position: absolute; right: 12px; top: 12px; width: clamp(135px, 15vw, 210px); z-index: 8; background: rgba(11, 11, 11, 0.914); border: 4px ridge rgb(153, 128, 97); padding: 6px; box-shadow: rgba(0, 0, 0, 0.667) 0px 2px 15px;} #gameScreen .classic-map-mini .mini-title{font: 13px serif; color: rgb(240, 220, 187); margin-bottom: 5px;} #gameScreen .classic-map-mini img{width: 100%; height: clamp(70px, 8vw, 120px); object-fit: cover; display: block; filter: saturate(0.65);} #gameScreen .classic-map-mini .mini-dot{position: absolute; left: 50%; top: 60%; width: 6px; height: 6px; border-radius: 50%; background: rgb(230, 50, 42); box-shadow: rgb(255, 255, 255) 0px 0px 5px;} #gameScreen .classic-map-mini[hidden]{display: none !important;} } #gameScreen .arena:not([hidden]){background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important;} #gameScreen .classic-map-mini img{display: block; width: 100%; height: auto; aspect-ratio: 505 / 291; object-fit: cover;} #gameScreen .battlefield.v3-active{isolation: isolate; overflow: hidden; background: rgb(38, 53, 36) !important;} #gameScreen .battlefield.v3-active > .combatant, #gameScreen .battlefield.v3-active > .vs, #gameScreen .battlefield.v3-active > .monster-group, #gameScreen .battlefield.v3-active > .rune{display: none !important;} .v3-map{position: absolute; inset: 0px; z-index: 12; overflow: hidden; cursor: crosshair; background: radial-gradient(at 48% 60%, rgb(108, 118, 81) 0%, rgb(82, 100, 67) 55%, rgb(46, 65, 47) 100%);} .v3-ground{position: absolute; inset: 0px; background: repeating-linear-gradient(33deg, transparent 0px, transparent 33px, rgba(0, 0, 0, 0.07) 34px, rgba(0, 0, 0, 0.07) 36px), repeating-linear-gradient(123deg, transparent 0px, transparent 34px, rgba(224, 209, 161, 0.043) 35px, rgba(224, 209, 161, 0.043) 37px), linear-gradient(90deg, transparent 0px, transparent 26%, rgb(181, 165, 130) 28%, rgb(181, 165, 130) 70%, transparent 72%), linear-gradient(0deg, transparent 0px, transparent 34%, rgb(172, 156, 125) 37%, rgb(172, 156, 125) 63%, transparent 66%); opacity: 0.9;} .v3-building{position: absolute; z-index: 2; box-sizing: border-box; border: 5px solid rgb(57, 41, 30); box-shadow: rgba(18, 23, 14, 0.533) 7px 10px 0px, rgb(184, 157, 109) 0px 0px 0px 4px inset; background: repeating-linear-gradient(90deg, rgb(107, 73, 49) 0px, rgb(107, 73, 49) 17px, rgb(130, 91, 61) 18px, rgb(130, 91, 61) 23px); transform: skewY(-4deg); pointer-events: none;} .v3-building::before{content: ""; position: absolute; left: -7%; right: -7%; top: -17%; height: 46%; background: repeating-linear-gradient(90deg, rgb(73, 48, 42) 0px, rgb(73, 48, 42) 18px, rgb(98, 64, 57) 19px, rgb(98, 64, 57) 24px); border: 3px solid rgb(39, 26, 22); transform: skewX(-9deg); box-shadow: rgba(0, 0, 0, 0.533) 0px 5px 8px;} .v3-building.forge{background: repeating-linear-gradient(90deg, rgb(85, 80, 74) 0px, rgb(85, 80, 74) 22px, rgb(114, 107, 96) 23px, rgb(114, 107, 96) 26px);} .v3-npc, .v3-avatar{position: absolute; z-index: 5; transform: translate(-50%, -58%); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 50px; white-space: nowrap; filter: drop-shadow(rgba(0, 0, 0, 0.6) 1px 4px 3px);} .v3-npc{background: none; border: 0px; color: rgb(255, 232, 173); cursor: pointer; padding: 0px;} .v3-npc:hover{filter: drop-shadow(gold 0px 0px 8px);} .v3-npc-body{font-size: clamp(25px, 4vh, 46px); color: rgb(214, 197, 157); text-shadow: rgb(40, 27, 21) 2px 2px;} .v3-npc small, .v3-avatar small{font-size: 12px; background: rgba(16, 16, 14, 0.86); color: rgb(248, 230, 188); padding: 2px 5px; border: 1px solid rgb(125, 101, 66); border-radius: 3px; text-shadow: rgb(0, 0, 0) 1px 1px;} .v3-avatar{z-index: 8; pointer-events: none;} .v3-avatar img{height: clamp(52px, 12vh, 125px); max-width: 90px; object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.6) 0px 5px 3px);} .v3-shop{position: absolute; right: 3%; top: 6%; width: min(380px, 40vw); max-height: 60%; display: flex; flex-direction: column; z-index: 65; background: rgb(36, 28, 20); border: 2px solid rgb(178, 139, 79); box-shadow: rgba(0, 0, 0, 0.8) 0px 10px 35px; color: rgb(233, 212, 168); border-radius: 6px; font-size: 14px;} .v3-shop-head{display: flex; align-items: center; justify-content: space-between; padding: 10px; background: rgb(58, 42, 27); font-weight: bold;} .v3-shop button{cursor: pointer; background: rgb(83, 64, 43); color: rgb(244, 223, 186); border: 1px solid rgb(149, 114, 69); border-radius: 3px; padding: 5px 9px;} .v3-shop-head button{font-size: 22px;} .v3-shop-tabs{display: flex; gap: 5px; padding: 7px;} .v3-shop-tabs button.chosen{background: rgb(135, 99, 51);} .v3-shop-content{padding: 8px; overflow: auto; min-height: 0px;} .v3-shop-item{display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgb(87, 70, 46); padding: 8px 2px;} .v3-shop-item span{flex: 1 1 0%;} .v3-shop-item input{width: 55px; background: rgb(23, 18, 13); color: rgb(255, 255, 255); border: 1px solid rgb(128, 102, 64); padding: 6px;} #gameScreen .battlefield.v3-active .v3-map{background: url("/assets/silver-knight-village-user.png?v=3011") center center / 100% 100% no-repeat rgb(86, 72, 57) !important;} #gameScreen .battlefield.v3-active .v3-ground, #gameScreen .battlefield.v3-active .v3-building{display: none !important;} #gameScreen .arena{background: none rgb(116, 128, 100) !important;} #gameScreen .battlefield{isolation: isolate; background: transparent !important; overflow: hidden !important;} #gameScreen .er-map-backdrop{position: absolute; inset: 0px; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(135deg, rgb(125, 137, 101), rgb(133, 129, 108) 50%, rgb(93, 108, 80));} #gameScreen .er-map-backdrop img{width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--map-position,50% 50%); transform: scale(var(--map-zoom,1)); transform-origin: center center; filter: brightness(0.95) saturate(0.95); pointer-events: none; user-select: none;} #gameScreen .er-map-backdrop::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(17, 17, 17, 0.067), rgba(17, 17, 17, 0) 65%, rgba(17, 17, 17, 0.2)); pointer-events: none;} #gameScreen .unit-label, #gameScreen .monster-name, #gameScreen .monster-hp-text{text-shadow: rgb(0, 0, 0) 0px 1px 2px, rgb(0, 0, 0) 1px 0px 2px, rgb(0, 0, 0) -1px 0px 2px;} #gameScreen .battlefield.v3-active .v3-map{background: transparent;} #gameScreen .battlefield.v3-active .v3-ground{opacity: 0.18;} /* Original archived selection images; black backdrop blends into the selection stage. */ .slot-art,.lineage-character-stand img{mix-blend-mode:screen;image-rendering:pixelated} /* classic-client.css */ /* Single game client UI base. No legacy HUD or dialog sheets are loaded. */ #gameScreen{position:fixed!important;inset:0!important;height:100dvh!important;min-height:0!important;overflow:hidden!important} #gameScreen .game-wrap{position:relative!important;width:100%!important;height:100%!important;max-width:none!important;padding:0!important;margin:0!important;display:block!important;overflow:hidden!important} #gameScreen .game-wrap::before,#gameScreen .game-wrap::after{display:none!important} #gameScreen .arena{position:absolute!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;height:auto!important} #gameScreen .character-panel,#gameScreen .classic-log-box,#gameScreen .bottom-nav{position:absolute!important;bottom:0!important;top:auto!important;box-sizing:border-box!important;z-index:60!important;margin:0!important} #gameScreen .character-panel{left:0!important;display:block!important} #gameScreen .character-panel>.portrait,#gameScreen .character-info{display:none!important} #gameScreen .classic-log-box{display:flex!important;flex-direction:column!important} #gameScreen .classic-log-box>strong{display:none!important} #gameScreen .classic-log-text{flex:1;min-height:0;overflow:auto;white-space:pre-line} #gameScreen .classic-chat-row{display:flex;gap:0;min-height:0;margin:0;position:relative} #gameScreen .classic-chat-row input{flex:1;min-width:0;margin:0;border:0;background:transparent;color:#eee} #gameScreen .classic-chat-row select{display:none!important} #gameScreen .bottom-nav>button:not(.hud17-key):not(.er-classic-menu){display:none!important} #gameScreen .hud17-key{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;border-radius:0;box-sizing:border-box} #gameScreen .hud17-key small,#gameScreen .hud17-key em{position:absolute;z-index:2} #gameScreen .hud17-key .hud17-itemname{display:none} #gameScreen .er-hotkey-pages{position:absolute;display:flex;z-index:4} .er20-meter{position:relative;min-width:0;overflow:hidden} .er20-fill{position:absolute;inset:0 auto 0 0;width:0;transition:width .2s} .er20-meter>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white} .er18-overlay,.bag-modal-overlay{position:fixed;inset:0;z-index:9997;pointer-events:none;background:transparent} .er18-window,.bag-modal{pointer-events:auto;position:fixed;right:0;top:0} .er18-tile{display:flex;align-items:center;justify-content:center;position:relative} .er18-glyph{display:flex;align-items:center;justify-content:center} .er18-glyph img{object-fit:contain} .er181-drag-handle{cursor:move!important;touch-action:none;user-select:none} .bag-tile{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;margin:0;cursor:pointer} .bag-tile.er-empty-slot{pointer-events:none} .bag-modal-info{white-space:pre-line;line-height:1.4} .bag-modal-icon{display:none} .bag-modal .bag-action{display:block;width:100%;margin-top:5px;cursor:pointer} .bag-modal[aria-label=技能] .bag-action[data-skill-name]{display:inline-flex;width:calc(25% - 2px);margin:1px;vertical-align:top;align-items:center;justify-content:center;position:relative} .bag-modal[aria-label=技能] .er-skill-label{position:absolute;bottom:0;left:0;right:0;line-height:1.1} .er-classic-character{display:grid} .er-classic-char-header{grid-column:1/-1;display:flex;justify-content:space-between} .er-classic-char-info .er316-attr,.er-classic-char-line{display:flex;align-items:center;justify-content:space-between} .er-classic-char-info .er316-attr button{padding:0} .er-classic-char-equipment{position:relative} .er-classic-slot{position:absolute;transform:translate(-50%,-50%);background:#222831;color:#aaa;border:1px inset #777;cursor:pointer} .er-classic-slot img{object-fit:contain;width:100%;height:100%} .er-classic-slot.empty{opacity:.35} .er-equip-caption{position:absolute;bottom:0;left:0;right:0;text-align:center} .er-classic-char-summary{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #777} .er317-shade{position:fixed;inset:0;z-index:10000;background:#0007;display:flex;align-items:center;justify-content:center} .er317-actions{display:flex;gap:8px;justify-content:end} #gameScreen .zone-panel{position:fixed;top:0;right:0;margin:0;z-index:9998} #gameScreen .zone-list{display:grid;gap:2px;overflow:auto} #gameScreen .zone-item{display:flex;justify-content:space-between;gap:4px;color:#e8e1c9;border:1px ridge #918773;cursor:pointer} #gameScreen .zone-text{display:flex;flex-direction:column;align-items:start} #gameScreen .zone-tag{font-size:85%;color:#bcb5a7} #hud17-notice,#toast,.toast{position:fixed;bottom:160px;left:50%;transform:translateX(-50%);z-index:10002;background:#343a45;border:1px solid #b8aa89;border-radius:0;color:#e9dfc7;padding:8px 14px;pointer-events:none} #er306-gold-tooltip{position:fixed;z-index:10001;display:none;background:#343944;color:#ede1b9;border:1px solid #b9ac8f;padding:6px} #er306-gold-tooltip.visible{display:block} #gameScreen .automation-row{display:flex;align-items:center;gap:3px;flex-wrap:wrap} #gameScreen .log-row{padding:4px 0;font-size:inherit;line-height:1.4;color:#d7cda6} @font-face{font-family:ClassicTC;src:url('/assets/classic-remaster/classic-serif-tc-v3439.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap} /* V3.3.0: reference client geometry in 730×548 logical coordinates. */ :root{--er33-u:1px;--er33-scale:1;--er33-ink:#e5e3d5;--er33-texture:url('/assets/classic-remaster/client-settings-reference.png')} #gameScreen{--er-classic-hud-height:calc(115 * var(--er33-u));--classic-hud-height:var(--er-classic-hud-height)!important;font-family:'PMingLiU','ClassicTC','MingLiU','新細明體',serif!important} #gameScreen .topline{display:none!important} #gameScreen .arena:not([hidden]){inset:0 0 calc(115 * var(--er33-u))!important} #gameScreen .quick-note,#gameScreen #er-system-controls{display:none!important} #gameScreen .character-panel,#gameScreen .classic-log-box,#gameScreen .bottom-nav{border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important} #gameScreen .character-panel{width:calc(124 * var(--er33-u))!important;height:calc(111 * var(--er33-u))!important;background-color:#22242b!important;background-repeat:no-repeat!important;z-index:61!important} #gameScreen .er19-stats{position:absolute!important;inset:0!important;display:block!important;padding:0!important;gap:0!important} #gameScreen .er19-head,#gameScreen .er19-cell,#gameScreen .er19-wide{border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;position:relative!important;font:bold calc(10 * var(--er33-u))/1 Georgia,'PMingLiU','ClassicTC',serif!important;color:#e8e7dc!important;padding:0!important;overflow:visible!important} #gameScreen .er19-head{height:calc(21 * var(--er33-u))!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 calc(4 * var(--er33-u))!important;box-sizing:border-box!important;background:#252a37!important;border:calc(2 * var(--er33-u)) ridge #af9870!important;border-radius:calc(3 * var(--er33-u))!important;isolation:isolate} #gameScreen .er33-exp-fill{display:block;position:absolute;inset:0 auto 0 0;background:linear-gradient(#aa6c2b,#e0a75e 45%,#8b552d);max-width:100%;z-index:-1} #gameScreen #er19-level,#gameScreen #er19-exp{position:relative;font-size:calc(9 * var(--er33-u))!important;text-shadow:1px 1px #000} #gameScreen .er19-duo{position:relative!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:calc(3 * var(--er33-u))!important;height:calc(22 * var(--er33-u))!important;min-height:0!important;margin:0!important} #gameScreen .er19-cell{height:100%!important;display:block!important;padding:0!important} #gameScreen .er19-cell i,#gameScreen .er19-wide i{display:none!important} #gameScreen .er19-cell span{position:absolute!important;left:calc(25 * var(--er33-u));right:calc(5 * var(--er33-u));top:calc(6 * var(--er33-u));height:calc(12 * var(--er33-u));display:flex;align-items:center;justify-content:flex-end;background:#262b36;color:white;text-shadow:1px 1px #000} #gameScreen .er19-cell.er19-amber span{background:linear-gradient(#886734,#9c7949)} #gameScreen .er19-law{height:calc(22 * var(--er33-u))!important;display:block!important} #gameScreen .er19-law>span{position:absolute;left:calc(25 * var(--er33-u));top:calc(6 * var(--er33-u));font-size:calc(8 * var(--er33-u));background:#283348} #gameScreen .er19-law>b{position:absolute;right:calc(7 * var(--er33-u));top:calc(5 * var(--er33-u));min-width:calc(48 * var(--er33-u));height:calc(13 * var(--er33-u));background:linear-gradient(#344969,#24334c);text-align:right;line-height:calc(13 * var(--er33-u))} #gameScreen .er19-land{height:calc(22 * var(--er33-u))!important;display:block!important} #gameScreen #er19-landscape{display:block!important;position:absolute!important;left:calc(24 * var(--er33-u));right:calc(5 * var(--er33-u));top:calc(5 * var(--er33-u));font:calc(9 * var(--er33-u))/1.2 'PMingLiU','ClassicTC',serif!important;background:linear-gradient(90deg,#49684a99,#54666699);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center} #gameScreen .classic-log-box.er20-chat{left:calc(124 * var(--er33-u))!important;width:auto!important;right:calc(164 * var(--er33-u))!important;height:calc(117 * var(--er33-u))!important;background:#464751!important;padding:calc(10 * var(--er33-u)) calc(14 * var(--er33-u)) calc(2 * var(--er33-u)) calc(6 * var(--er33-u))!important;box-sizing:border-box!important;isolation:isolate!important;border-right:calc(4 * var(--er33-u)) ridge #bcad88!important;border-left:calc(3 * var(--er33-u)) ridge #bcad88!important} #gameScreen .er33-chat-stone{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:1} #gameScreen .er33-dragon-frame{position:absolute;left:calc(-14 * var(--er33-u));right:calc(-4 * var(--er33-u));top:calc(-43 * var(--er33-u));height:calc(53 * var(--er33-u));z-index:3;pointer-events:none;clip-path:polygon(0 100%,0 72%,3% 72%,3% 47%,6% 12%,9% 37%,12% 45%,42% 45%,46% 0,54% 0,58% 45%,87% 45%,91% 37%,94% 12%,98% 47%,98% 72%,100% 72%,100% 100%)} #gameScreen .er20-vitals{position:absolute!important;left:calc(25 * var(--er33-u))!important;right:calc(25 * var(--er33-u))!important;top:calc(-11 * var(--er33-u))!important;height:calc(16 * var(--er33-u))!important;min-height:0!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:1fr calc(53 * var(--er33-u)) 1fr!important;gap:0!important;z-index:4!important;background:none!important;border:0!important;border-radius:0!important;pointer-events:auto!important} #gameScreen .er20-meter{height:calc(14 * var(--er33-u))!important;border:1px solid #222!important;box-shadow:inset 0 0 3px #000!important;border-radius:0!important;background:#11121d!important;min-width:0!important;overflow:hidden!important} #gameScreen .er20-meter span{font:bold calc(9 * var(--er33-u))/1 Georgia,serif!important;text-shadow:1px 1px #000!important} #gameScreen .er20-hp .er20-fill{background:linear-gradient(#7a1008,#dc5543 28%,#ad2115 70%,#4e0904)!important} #gameScreen .er20-mp .er20-fill{background:linear-gradient(#323649,#8986ac 30%,#585678 70%,#252438)!important} #gameScreen .er20-dragon{width:100%!important;height:100%!important;border:0!important;background:transparent!important} #gameScreen .er20-chat .classic-log-text{font:calc(10 * var(--er33-u))/1.2 'PMingLiU','ClassicTC','MingLiU',serif!important;letter-spacing:0!important;color:#e9d78a!important;background:none!important;border:0!important;padding:calc(3 * var(--er33-u)) 0 0!important;overflow:auto!important;scrollbar-width:none!important} #gameScreen .er20-chat .classic-log-text::-webkit-scrollbar{display:none} #gameScreen .er20-chat .classic-chat-channels{display:none!important} #gameScreen .er20-chat .classic-chat-row{height:calc(13 * var(--er33-u))!important;flex:0 0 calc(13 * var(--er33-u))!important;border:1px inset #8b8b91!important;border-radius:0!important;background:#40414e!important;position:relative!important} #gameScreen .er20-chat .classic-chat-row::before{content:'¶';display:flex;align-items:center;justify-content:center;background:#b554c2;color:white;width:calc(12 * var(--er33-u));font:bold calc(10 * var(--er33-u)) Georgia;flex-shrink:0} #gameScreen .er20-chat .classic-chat-row input{padding:0 calc(3 * var(--er33-u))!important;height:100%!important;font:calc(10 * var(--er33-u)) 'PMingLiU','ClassicTC',serif!important;color:white!important;outline:none!important} #gameScreen .er20-chat .classic-chat-row button{display:none!important} #gameScreen .er33-chat-scroll{position:absolute;right:0;bottom:calc(3 * var(--er33-u));top:calc(4 * var(--er33-u));width:calc(11 * var(--er33-u));display:flex;flex-direction:column;justify-content:space-between;z-index:4} #gameScreen .er33-chat-scroll button{padding:0;min-height:0;width:100%;height:calc(12 * var(--er33-u));border:1px ridge #c2b68c;border-radius:50%;background:#77767c;color:#e5e2ca;font:calc(8 * var(--er33-u)) Georgia;line-height:1;cursor:pointer} #gameScreen .battle-controls{position:absolute!important;top:calc(-45 * var(--er33-u))!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;z-index:8!important;display:block!important;margin:0!important;padding:0!important;background:none!important} #gameScreen .battle-controls button{width:calc(22 * var(--er33-u))!important;height:calc(22 * var(--er33-u))!important;min-height:0!important;min-width:0!important;border:1px ridge #d2bdb2!important;border-radius:50%!important;background:#955c5bba!important;color:#e9d0c2!important;padding:0!important;font:calc(9 * var(--er33-u)) Georgia!important;opacity:1!important;cursor:pointer} #gameScreen .battle-controls button[hidden]{display:none!important} #gameScreen .er20-hp #heal{display:block!important;position:absolute!important;inset:0!important;border:0!important;padding:0!important;opacity:0!important;width:100%!important;height:100%!important;cursor:pointer!important;z-index:10!important;min-height:0!important} #gameScreen .arena-top{top:auto!important;bottom:calc(4 * var(--er33-u))!important;left:calc(3 * var(--er33-u))!important;background:none!important;font-size:calc(9 * var(--er33-u))!important} #gameScreen #huntState{display:none!important} #gameScreen .er33-zone-label{position:absolute;right:calc(3 * var(--er33-u));bottom:calc(3 * var(--er33-u));font:italic bold calc(15 * var(--er33-u)) 'Times New Roman',serif;color:#83d2ff;text-shadow:1px 1px 1px #000;z-index:40;pointer-events:none} #gameScreen .bottom-nav{left:auto!important;right:0!important;bottom:0!important;width:calc(164 * var(--er33-u))!important;height:calc(112 * var(--er33-u))!important;background:#131519!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;grid-template-rows:repeat(2,1fr)!important;gap:0!important;padding:calc(4 * var(--er33-u)) calc(1 * var(--er33-u)) calc(22 * var(--er33-u)) calc(2 * var(--er33-u))!important;border:calc(2 * var(--er33-u)) ridge #c1b797!important;box-sizing:border-box!important} #gameScreen .bottom-nav button.hud17-key{width:auto!important;height:auto!important;border:calc(1 * var(--er33-u)) solid #7c7157!important;background:linear-gradient(110deg,#111319,#1d2027)!important;overflow:hidden!important;box-shadow:inset 0 0 2px #000!important} #gameScreen .bottom-nav .hud17-key img{width:calc(34 * var(--er33-u))!important;height:calc(34 * var(--er33-u))!important;max-width:94%!important;max-height:94%!important;image-rendering:auto} #gameScreen .bottom-nav .hud17-key>small{font:calc(6 * var(--er33-u)) Georgia!important;left:calc(2 * var(--er33-u))!important;top:0!important;opacity:.6} #gameScreen .bottom-nav .hud17-key em{font:bold calc(8 * var(--er33-u)) Georgia!important;right:calc(2 * var(--er33-u))!important;bottom:0!important} #gameScreen .bottom-nav .hud17-itemname{display:none!important} #gameScreen .bottom-nav button.er-classic-menu{bottom:calc(-1 * var(--er33-u))!important;left:calc(var(--menu-index) * 11.111%)!important;width:11.111%!important;height:calc(22 * var(--er33-u))!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background-color:#b1976b!important;box-shadow:none!important;min-height:0!important;position:absolute!important;display:block!important} #gameScreen .er-classic-menu svg,#gameScreen .er-classic-menu .er-menu-label{display:none!important} #gameScreen .bottom-nav .er-hotkey-pages{left:calc(1 * var(--er33-u));top:calc(-13 * var(--er33-u));height:calc(13 * var(--er33-u));gap:calc(1 * var(--er33-u));align-items:center} #gameScreen .er-hotkey-pages button{height:calc(12 * var(--er33-u))!important;width:calc(20 * var(--er33-u))!important;font:bold calc(8 * var(--er33-u)) Georgia!important;border:calc(1 * var(--er33-u)) ridge #aaa18c!important;border-radius:calc(3 * var(--er33-u))!important;background:#202128!important;color:#c2b8a5!important;padding:0!important} #gameScreen .er-hotkey-pages button.active{background:#575152!important;color:white!important} /* Real reference corner/edge sprites stretch only along each edge. */ .er33-frame{position:absolute!important;inset:0!important;z-index:10!important;pointer-events:none!important;overflow:hidden!important} .er33-frame i{display:block;position:absolute;pointer-events:none} .er33-frame-tl{left:0;top:0;width:calc(22 * var(--er33-u));height:calc(20 * var(--er33-u))} .er33-frame-t{left:calc(22 * var(--er33-u));right:calc(32 * var(--er33-u));top:0;height:calc(15 * var(--er33-u))} .er33-frame-tr{right:0;top:0;width:calc(32 * var(--er33-u));height:calc(20 * var(--er33-u))} .er33-frame-l{left:0;top:calc(20 * var(--er33-u));bottom:calc(20 * var(--er33-u));width:calc(22 * var(--er33-u))} .er33-frame-r{right:0;top:calc(20 * var(--er33-u));bottom:calc(20 * var(--er33-u));width:calc(32 * var(--er33-u))} .er33-frame-bl{left:0;bottom:0;width:calc(22 * var(--er33-u));height:calc(20 * var(--er33-u))} .er33-frame-b{left:calc(22 * var(--er33-u));right:calc(32 * var(--er33-u));bottom:0;height:calc(20 * var(--er33-u))} .er33-frame-br{right:0;bottom:0;width:calc(32 * var(--er33-u));height:calc(20 * var(--er33-u))} #gameScreen #detailPanel,#gameScreen .zone-panel,.er18-window,.bag-modal,.er33-window{border:0!important;border-radius:0!important;box-shadow:none!important;background:#363942!important;color:#e5e3d5!important;font-family:'PMingLiU','ClassicTC','MingLiU',serif!important;padding:calc(15 * var(--er33-u)) calc(30 * var(--er33-u)) calc(20 * var(--er33-u)) calc(21 * var(--er33-u))!important;box-sizing:border-box!important;overflow:visible!important;z-index:9998!important} #gameScreen #detailPanel{width:calc(202 * var(--er33-u))!important;height:calc(328 * var(--er33-u))!important;max-height:calc(100dvh - 120 * var(--er33-u))!important;max-width:calc(var(--er3419-vw, 1vw) * 100)!important} #gameScreen #detailPanel[data-classic-panel=inventory]{padding-top:calc(17 * var(--er33-u))!important} #gameScreen #detailPanel .section-title,.er18-head,.bag-modal>h3{position:absolute!important;left:calc(21 * var(--er33-u));right:calc(31 * var(--er33-u));top:0!important;height:calc(15 * var(--er33-u))!important;min-height:0!important;padding:0!important;background:none!important;border:0!important;margin:0!important;display:flex!important;align-items:center;font:calc(9 * var(--er33-u)) Georgia,'PMingLiU','ClassicTC',serif!important;color:#e3dcc5!important;cursor:move;z-index:12} #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title{font-size:0!important} #gameScreen #detailPanel #detailBody{height:100%!important;max-height:none!important;padding:0!important;overflow:auto!important;scrollbar-width:thin;scrollbar-color:#c0b38b #35353c;font-size:calc(10 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=inventory] #detailBody{overflow:visible!important;display:flex;flex-direction:column} #gameScreen #detailBody>.bag-tabs,#gameScreen #detailBody>.bag-filters,#gameScreen #detailBody>.er33-old-inventory-action,#gameScreen #detailBody>.muted,#gameScreen #detailBody>.bag-note{display:none!important} #gameScreen #detailBody .bag-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:calc(36.5 * var(--er33-u))!important;gap:0!important;border:0!important;background:#111218!important;padding:0!important;overflow-y:auto!important;min-height:0!important;flex:1!important;scrollbar-width:none!important;align-content:start!important} #gameScreen #detailBody .bag-grid::-webkit-scrollbar{display:none} #gameScreen #detailBody .bag-grid .bag-tile{height:calc(36.5 * var(--er33-u))!important;min-height:0!important;aspect-ratio:auto!important;padding:calc(1 * var(--er33-u))!important;border:calc(1 * var(--er33-u)) solid #6b6759!important;background:radial-gradient(ellipse at 40% 35%,#262b30,#0a0c10 90%)!important;border-radius:0!important;overflow:hidden!important;box-shadow:none!important;box-sizing:border-box!important} #gameScreen #detailBody .bag-grid .bag-tile .bag-icon{width:100%!important;height:100%!important;display:flex!important;justify-content:center!important;align-items:center!important;background:none!important} #gameScreen #detailBody .bag-grid .item-pixel-image{width:calc(32 * var(--er33-u))!important;height:calc(32 * var(--er33-u))!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;image-rendering:auto!important} #gameScreen .bag-count,#gameScreen .er-enchant-level,#gameScreen .bag-equipped-on{font:bold calc(8 * var(--er33-u)) Georgia!important;line-height:1!important;position:absolute!important;z-index:2!important;text-shadow:1px 1px #000!important} #gameScreen .bag-equipped-on{left:calc(1 * var(--er33-u))!important;top:calc(1 * var(--er33-u))!important;color:#6fb6cb!important;background:none!important;border:0!important;padding:0!important} #gameScreen .bag-count{right:calc(2 * var(--er33-u))!important;bottom:calc(1 * var(--er33-u))!important} #gameScreen .bag-hover-name{display:none!important} #gameScreen .er33-bag-description{flex:0 0 calc(72 * var(--er33-u));overflow:hidden;border:1px solid #675f4d;background:#080a0b;color:#efede4;padding:calc(3 * var(--er33-u));box-sizing:border-box;font-size:calc(10 * var(--er33-u));line-height:1.15;white-space:pre-line} #gameScreen .er33-bag-rail{position:absolute;right:calc(7 * var(--er33-u));top:calc(20 * var(--er33-u));bottom:calc(22 * var(--er33-u));width:calc(14 * var(--er33-u));z-index:12;display:flex;flex-direction:column;gap:calc(4 * var(--er33-u));align-items:center} #gameScreen .er33-bag-rail button{width:100%;height:calc(14 * var(--er33-u));min-height:0;border:1px ridge #b9ac88;border-radius:50%;background:#5b5a5e;color:#e6dec4;padding:0;font:bold calc(9 * var(--er33-u)) Georgia;cursor:pointer} #gameScreen .er33-bag-rail button:last-child{margin-top:auto} #gameScreen #detailPanel>.er-close-x,#gameScreen .zone-panel>.er-close-x,.bag-modal>.er-close-x,.er18-close,.er33-close{position:absolute!important;top:calc(1 * var(--er33-u))!important;right:calc(4 * var(--er33-u))!important;width:calc(25 * var(--er33-u))!important;height:calc(12 * var(--er33-u))!important;min-width:0!important;min-height:0!important;font:bold italic calc(8 * var(--er33-u))/1 Georgia!important;border:0!important;border-radius:0!important;background:#3a3a3c!important;box-shadow:none!important;color:#f1e9d0!important;padding:0!important;z-index:15!important;cursor:pointer} #gameScreen #detailPanel[data-classic-panel=stats],#gameScreen #detailPanel:has(.er-classic-character){width:calc(290 * var(--er33-u))!important} #gameScreen .er-classic-character{font-size:calc(10 * var(--er33-u));gap:0;grid-template-columns:45% 55%;line-height:1.1} #gameScreen .er-classic-char-header{padding:calc(3 * var(--er33-u));margin:0 0 calc(3 * var(--er33-u));background:#30323c;border:0} #gameScreen .er-classic-char-info .er316-attr{min-height:calc(16 * var(--er33-u));height:calc(16 * var(--er33-u));padding:0 calc(3 * var(--er33-u));font-size:calc(10 * var(--er33-u))} #gameScreen .er-classic-char-info .er316-attr button{width:calc(13 * var(--er33-u));height:calc(13 * var(--er33-u));font-size:calc(10 * var(--er33-u));min-height:0;padding:0} #gameScreen .er-classic-char-line{padding:calc(2 * var(--er33-u));font-size:calc(9 * var(--er33-u));line-height:1.1;gap:calc(2 * var(--er33-u))} #gameScreen .er-classic-char-line b{min-width:calc(30 * var(--er33-u));padding:0 calc(2 * var(--er33-u));border:1px inset #7b7a73;background:#292b35} #gameScreen .er-classic-char-equipment{height:calc(220 * var(--er33-u));margin:0} #gameScreen .er-classic-slot{width:calc(28 * var(--er33-u));height:calc(28 * var(--er33-u));border:1px inset #6c6b65;padding:0} #gameScreen .er-classic-slot .bag-icon,#gameScreen .er-classic-slot img{width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain} #gameScreen .er-classic-slot small,#gameScreen .er-equip-caption{font-size:calc(7 * var(--er33-u))} #gameScreen .er-classic-char-summary{gap:0;margin:calc(4 * var(--er33-u)) 0 0;padding:calc(3 * var(--er33-u)) 0 0} /* Spell pages and remaining dialogs share the native frame, not web cards. */ .er18-window{width:calc(202 * var(--er33-u))!important;height:calc(328 * var(--er33-u))!important;max-height:calc(100dvh - 120 * var(--er33-u))!important;display:flex!important;flex-direction:column!important} .er18-tabs{display:flex!important;gap:0!important;padding:0!important;margin:0!important;border:0!important;flex:0 0 auto!important} .er18-tabs button,.er18-tier-tabs button{font-size:calc(8 * var(--er33-u))!important;padding:calc(2 * var(--er33-u))!important;border:1px ridge #9d9584!important;border-radius:0!important;background:#444751!important;color:#deded2!important;min-height:0!important;cursor:pointer} .er18-tabs button.active,.er18-tier-tabs button.active{background:#6b6d79!important;color:white!important} .er18-content{padding:0!important;overflow:auto!important;scrollbar-width:none;flex:1;min-height:0;font:calc(9 * var(--er33-u)) 'PMingLiU','ClassicTC',serif!important} .er18-note,.er18-group>h3,.er18-tile small{display:none!important} .er18-tier-tabs{display:flex;flex-wrap:wrap;gap:0;margin:calc(3 * var(--er33-u)) 0} .er18-group{margin:0!important} .er18-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;border:0!important} .er18-tile{height:calc(36.5 * var(--er33-u))!important;aspect-ratio:auto!important;min-height:0!important;padding:calc(1 * var(--er33-u))!important;border:1px solid #777164!important;background:radial-gradient(#262a2f,#090b10)!important;box-sizing:border-box;border-radius:0!important} .er18-glyph,.er18-glyph img{width:calc(32 * var(--er33-u))!important;height:calc(32 * var(--er33-u))!important} .er18-tile.learned{opacity:1!important}.er18-tile:not(.learned):not(.er-empty-slot){opacity:.28!important} .bag-modal{width:calc(230 * var(--er33-u))!important;max-height:calc(100dvh - 120 * var(--er33-u))!important;overflow:auto!important;font-size:calc(10 * var(--er33-u))!important} .bag-modal .bag-action{padding:calc(4 * var(--er33-u))!important;min-height:0!important;font-size:calc(10 * var(--er33-u))!important;border:1px ridge #969080!important;border-radius:0!important;background:#3b3d45!important;color:#eee9d6!important} .bag-modal select{font-size:calc(9 * var(--er33-u))!important;padding:calc(2 * var(--er33-u))!important} .bag-modal[aria-label=技能] .bag-action[data-skill-name]{aspect-ratio:1!important;padding:0!important} .bag-modal[aria-label=技能] .er-skill-picture{width:calc(30 * var(--er33-u));height:calc(30 * var(--er33-u))} .bag-modal[aria-label=技能] .er-skill-label{font-size:calc(6 * var(--er33-u))} #er-item-tooltip{font-family:'PMingLiU','ClassicTC',serif!important;border:1px solid #978d68!important;border-radius:0!important;background:rgba(0,0,0,.74)!important;box-shadow:none!important;font-size:calc(10 * var(--er33-u))!important} #er-item-tooltip button{font-size:calc(10 * var(--er33-u))!important;padding:calc(3 * var(--er33-u))!important;border-radius:0!important;min-height:0!important} #gameScreen .zone-panel{width:calc(250 * var(--er33-u))!important;max-height:calc(100dvh - 120 * var(--er33-u))!important} #gameScreen .zone-list{overflow:auto;max-height:calc(270 * var(--er33-u));font-size:calc(10 * var(--er33-u))} #gameScreen .zone-panel .tabs button,#gameScreen .zone-item{font-size:calc(9 * var(--er33-u))!important;padding:calc(3 * var(--er33-u))!important;min-height:0!important;border-radius:0!important;background:#3a3d47!important} /* NPC dialog: the catalog/selection list on the left, live bag on the right. */ .er33-shop{position:fixed!important;left:0;top:0;width:calc(234 * var(--er33-u));height:calc(328 * var(--er33-u));max-width:calc(var(--er3419-vw, 1vw) * 48);display:flex;flex-direction:column;font-size:calc(10 * var(--er33-u));z-index:10001!important} .er33-shop-title{position:absolute;inset:0 0 auto;height:calc(15 * var(--er33-u));padding:0 calc(25 * var(--er33-u));font-size:calc(9 * var(--er33-u));color:#e9e3cb;cursor:move} .er33-shop-tabs{display:flex;gap:calc(3 * var(--er33-u));margin:0 0 calc(2 * var(--er33-u));flex-shrink:0} .er33-shop-tabs button{border:1px ridge #a19a87;border-radius:0;padding:0 calc(6 * var(--er33-u));font-size:calc(9 * var(--er33-u));color:#dbd9cc;background:#353844;min-height:0;cursor:pointer} .er33-shop-tabs button.active{background:#65636c;color:white} .er33-shop-money{font-size:calc(8 * var(--er33-u));color:#d9c895;margin:calc(2 * var(--er33-u)) 0} .er33-shop-money.insufficient{color:#ff8981} .er33-shop-list{flex:1;overflow:auto;min-height:0;background:#202329;scrollbar-width:thin;scrollbar-color:#c7b783 #373943} .er33-shop-row{position:relative;min-height:calc(35 * var(--er33-u));border:calc(1 * var(--er33-u)) solid #6a685e;box-sizing:border-box;background:linear-gradient(115deg,#252832,#1b1d24);color:#e9e7d9;padding:calc(3 * var(--er33-u)) calc(3 * var(--er33-u)) calc(2 * var(--er33-u)) calc(36 * var(--er33-u));cursor:pointer} .er33-shop-row.selected{background:linear-gradient(110deg,#212548,#31365c)} .er33-shop-row input[type=checkbox]{position:absolute;left:calc(2 * var(--er33-u));top:calc(3 * var(--er33-u));width:calc(8 * var(--er33-u));height:calc(8 * var(--er33-u));margin:0;accent-color:#c3b77c} .er33-shop-row>.er33-item-image{position:absolute;left:calc(5 * var(--er33-u));top:calc(4 * var(--er33-u));width:calc(28 * var(--er33-u));height:calc(28 * var(--er33-u));object-fit:contain} .er33-shop-name{display:block;line-height:1.1;font-size:calc(10 * var(--er33-u))} .er33-shop-price{display:block;position:absolute;right:calc(28 * var(--er33-u));bottom:calc(2 * var(--er33-u));color:#e5d5a1;font:bold calc(9 * var(--er33-u)) Georgia} .er33-shop-price::before{content:'♩';color:#b6a03e;margin-right:calc(3 * var(--er33-u))} .er33-shop-row .er33-shop-quantity{position:absolute;bottom:calc(1 * var(--er33-u));right:calc(1 * var(--er33-u));width:calc(26 * var(--er33-u));height:calc(13 * var(--er33-u));padding:0!important;min-height:0;border:1px ridge #77756b;border-radius:0;background:#1c2032;color:#efe9d0;font-size:calc(8 * var(--er33-u));box-sizing:border-box} .er33-shop-footer{position:absolute;bottom:calc(3 * var(--er33-u));left:calc(12 * var(--er33-u));right:calc(14 * var(--er33-u));height:calc(13 * var(--er33-u));display:flex;align-items:center;gap:calc(4 * var(--er33-u));z-index:12;font:bold calc(8 * var(--er33-u)) Georgia;color:#eee9d3} .er33-shop-total{flex:1} .er33-shop-footer button{padding:0;min-height:0;border:0;background:#33343c;color:#eee9d3;cursor:pointer;font:bold italic calc(9 * var(--er33-u)) Georgia} .er33-shop-footer button:disabled{opacity:.4;cursor:default} .er33-shop-message{height:calc(12 * var(--er33-u));font-size:calc(8 * var(--er33-u));margin:calc(2 * var(--er33-u)) 0 0;line-height:1.1;color:#e8ce89} .er33-shop-empty{font-size:calc(9 * var(--er33-u));padding:calc(3 * var(--er33-u))} .er33-merchants{position:absolute;inset:0;z-index:35;pointer-events:none} .er33-merchant{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;border:0;background:transparent;color:#e4e6da;font:calc(10 * var(--er33-u)) 'PMingLiU','ClassicTC',serif;padding:0;text-shadow:1px 1px 2px #000,-1px -1px 1px #000;cursor:pointer;min-height:0} .er33-merchant-sign{color:#cfc49f;font-size:calc(22 * var(--er33-u));filter:drop-shadow(0 2px 1px #000)} .er33-merchant:hover{color:#f4d875} @media(max-width:600px){.er33-shop{max-width:calc(var(--er3419-vw, 1vw) * 49)}#gameScreen #detailPanel[data-classic-panel=inventory]{max-width:calc(var(--er3419-vw, 1vw) * 49)!important}#gameScreen .classic-log-box.er20-chat{padding-left:calc(3 * var(--er33-u))!important}#gameScreen .er20-vitals{left:calc(9 * var(--er33-u))!important;right:calc(9 * var(--er33-u))!important;grid-template-columns:1fr calc(35 * var(--er33-u)) 1fr!important}.er33-merchants{z-index:35}.er33-shop-name{font-size:calc(9 * var(--er33-u))}#gameScreen .er20-meter span{font-size:calc(7 * var(--er33-u))!important}} #gameScreen .er33-bag-rail .er33-rail-skills{font-size:0!important} #gameScreen .er33-bag-rail .er33-rail-skills::before{content:'✧';font-size:calc(9 * var(--er33-u))} #gameScreen .er33-shop{padding-left:calc(10 * var(--er33-u))!important;padding-right:calc(25 * var(--er33-u))!important;padding-top:calc(14 * var(--er33-u))!important} .er33-shop .er33-frame-tl,.er33-shop .er33-frame-bl,.er33-shop .er33-frame-l{width:calc(9 * var(--er33-u))} .er33-shop .er33-frame-tr,.er33-shop .er33-frame-br,.er33-shop .er33-frame-r{width:calc(17 * var(--er33-u))} .er33-shop .er33-frame-t,.er33-shop .er33-frame-b{left:calc(9 * var(--er33-u));right:calc(17 * var(--er33-u))} #gameScreen #detailPanel[data-classic-panel=settings]{width:calc(232 * var(--er33-u))!important;height:calc(332 * var(--er33-u))!important;padding:calc(24 * var(--er33-u)) calc(12 * var(--er33-u)) calc(14 * var(--er33-u)) calc(9 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=settings]>.er33-frame{display:none!important} #gameScreen #detailPanel[data-classic-panel=settings]{background-image:url('/assets/classic-remaster/client-settings-reference.png')!important;background-repeat:no-repeat!important;background-size:315.0862% 166.8674%!important;background-position:0 0!important} #gameScreen #detailPanel[data-classic-panel=settings] #detailBody{overflow:visible!important;background:#55565f} .er33-automation{height:100%;position:relative;background:#55565f;display:flex;flex-direction:column} .er33-settings-tabs{position:absolute;top:calc(-21 * var(--er33-u));left:calc(-4 * var(--er33-u));right:calc(3 * var(--er33-u));display:flex;gap:calc(1 * var(--er33-u));height:calc(19 * var(--er33-u))} .er33-settings-tabs button{padding:0 calc(5 * var(--er33-u))!important;min-height:0!important;margin:0!important;flex:1;border:1px ridge #797b87!important;border-radius:calc(4 * var(--er33-u)) calc(4 * var(--er33-u)) 0 0!important;background:linear-gradient(#6a6b78,#323641)!important;color:#e6e5d9!important;font:calc(9 * var(--er33-u)) 'PMingLiU','ClassicTC',serif!important;white-space:nowrap} .er33-settings-tabs button.active{background:linear-gradient(#777d8b,#515969)!important;color:white!important} .er33-settings-content{flex:1;min-height:0;overflow:auto;scrollbar-width:thin} .er33-settings-caption{font-size:calc(10 * var(--er33-u));line-height:1;margin:calc(4 * var(--er33-u)) 0 calc(4 * var(--er33-u));color:#e8e7df} .er33-recovery{display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--er33-u));padding:0 calc(2 * var(--er33-u))} .er33-recovery-slots{display:flex;gap:0} .er33-settings-slot{display:flex;align-items:center;justify-content:center;width:calc(34 * var(--er33-u));height:calc(36 * var(--er33-u));min-height:0;padding:0!important;border:calc(1 * var(--er33-u)) ridge #8c8777!important;border-radius:0!important;box-sizing:border-box;background:radial-gradient(#202329,#08090d)!important;color:#e5dec7;cursor:pointer} .er33-settings-slot img{width:90%;height:90%;object-fit:contain} .er33-settings-slot.empty{cursor:default} .er33-settings-slot.selected{outline:1px solid #cabe93;outline-offset:calc(-3 * var(--er33-u))} .er33-recovery select{width:calc(70 * var(--er33-u));height:calc(11 * var(--er33-u));font:calc(7 * var(--er33-u)) 'PMingLiU','ClassicTC',serif;border:0;border-radius:0;background:#4e505b;color:#e3e0d3;padding:0;margin:0;min-height:0} .er33-recovery-condition{display:flex;align-items:center;gap:calc(2 * var(--er33-u));font-size:calc(9 * var(--er33-u));white-space:nowrap} .er33-recovery-condition input[type=checkbox],.er33-settings-status input{width:calc(9 * var(--er33-u));height:calc(9 * var(--er33-u));margin:0;accent-color:#a0a4b0} .er33-recovery-condition input[type=number]{width:calc(25 * var(--er33-u));height:calc(13 * var(--er33-u));min-height:0;margin:0;padding:0!important;border:0;border-bottom:1px solid #797b88;border-radius:0;font:bold calc(9 * var(--er33-u)) Georgia;background:#3b404c;color:#f5f1df} .er33-settings-tools{display:grid;grid-template-columns:repeat(6,1fr);gap:0} .er33-settings-tools .er33-settings-slot{width:100%;height:calc(34 * var(--er33-u))} .er33-settings-status{display:flex;align-items:center;gap:calc(2 * var(--er33-u));font-size:calc(10 * var(--er33-u));margin:calc(8 * var(--er33-u)) 0 calc(3 * var(--er33-u))} .er33-settings-buffs{display:grid;grid-template-columns:repeat(6,1fr);gap:0} .er33-settings-buffs .er33-settings-slot{width:100%} .er33-settings-footer{height:calc(13 * var(--er33-u));flex:0 0 calc(13 * var(--er33-u));display:flex;justify-content:space-between;gap:calc(4 * var(--er33-u));padding:calc(3 * var(--er33-u)) 0 0;border-top:1px solid #858077;box-sizing:border-box;background:#41434b} .er33-settings-footer button{min-height:0;padding:0!important;border:0!important;border-radius:0;background:transparent!important;color:#e9e7d8;font:bold calc(9 * var(--er33-u)) Georgia;cursor:pointer} .er33-settings-help{white-space:pre-line;font-size:calc(10 * var(--er33-u));line-height:1.7;padding:calc(5 * var(--er33-u))} .er33-settings-content .automation-row{font-size:calc(8 * var(--er33-u));padding:calc(3 * var(--er33-u));gap:calc(2 * var(--er33-u));flex-wrap:wrap} .er33-settings-content .automation-row select,.er33-settings-content .automation-row input,.er33-settings-content button,.er33-settings-content .muted{font-size:calc(8 * var(--er33-u))!important;min-height:0;padding:calc(2 * var(--er33-u))!important;border-radius:0!important} .er33-settings-content .automation-row input[type=number]{width:calc(30 * var(--er33-u))} #gameScreen #detailPanel[data-classic-panel=inventory]{padding-left:calc(22 * var(--er33-u))!important;padding-right:calc(32 * var(--er33-u))!important} #gameScreen #detailBody .bag-grid{grid-auto-rows:calc(37 * var(--er33-u))!important} #gameScreen #detailBody .bag-grid .bag-tile{height:calc(37 * var(--er33-u))!important} #gameScreen .er33-bag-description{flex-basis:calc(69 * var(--er33-u))} #gameScreen #detailPanel[data-classic-panel=settings]{background-size:315.0862% 166.8674%!important} .er33-frame-b{height:calc(10 * var(--er33-u))} #detailPanel[data-classic-panel=inventory]>.er33-frame>.er33-frame-tl{clip-path:polygon(60% 0,100% 0,100% 100%,0 100%,0 60%,60% 60%)} #gameScreen .er33-map-bookmark{position:absolute;bottom:calc(3 * var(--er33-u));left:calc(25 * var(--er33-u));font:calc(9 * var(--er33-u)) 'PMingLiU','ClassicTC',serif;min-height:0;padding:0 calc(3 * var(--er33-u));background:#44454d;color:#eee8d5;border:1px ridge #b2a789;border-radius:0;z-index:12} #gameScreen .er33-dragon-frame{top:calc(-57 * var(--er33-u));height:calc(65 * var(--er33-u));clip-path:none;z-index:5} #gameScreen .er20-vitals{top:calc(-15 * var(--er33-u))!important;height:calc(13 * var(--er33-u))!important} #gameScreen .er20-meter{height:calc(12 * var(--er33-u))!important} #gameScreen .er19-cell span{top:calc(2 * var(--er33-u));height:calc(18 * var(--er33-u));left:calc(24 * var(--er33-u));right:calc(3 * var(--er33-u))} #gameScreen .er19-law>b{top:calc(2 * var(--er33-u));height:calc(18 * var(--er33-u));line-height:calc(18 * var(--er33-u));min-width:calc(52 * var(--er33-u))} #gameScreen .er19-law>span{top:calc(2 * var(--er33-u));height:calc(18 * var(--er33-u));line-height:calc(18 * var(--er33-u))} #gameScreen #er19-landscape{top:calc(2 * var(--er33-u));height:calc(18 * var(--er33-u));line-height:calc(18 * var(--er33-u))!important} .er33-choice{position:fixed!important;top:calc(80 * var(--er33-u))!important} .er33-choice select{width:100%;background:#272a34;color:#e8e5d3;border:1px solid #817b6c} .er317-dialog{position:relative!important;border:0!important;border-radius:0!important;background:#353842!important;padding:calc(20 * var(--er33-u)) calc(32 * var(--er33-u))!important;color:#eae5d1!important;font:calc(10 * var(--er33-u)) 'PMingLiU','ClassicTC',serif!important;box-shadow:none!important} .er317-dialog button{font:calc(10 * var(--er33-u)) 'PMingLiU','ClassicTC',serif!important;border:1px ridge #ada38b!important;border-radius:0!important;background:#3b3e49!important;color:#eee9d5!important} .er33-shop-row input[type=checkbox]{z-index:2} .er33-shop-row>.er33-item-image{pointer-events:none} .er33-shop .er33-frame-t{height:calc(6 * var(--er33-u))} .er33-shop .er33-frame-b{height:calc(2 * var(--er33-u))} .er33-shop-footer{background:#363942} .er33-settings-footer{position:absolute;bottom:calc(-10 * var(--er33-u));left:0;right:0;height:calc(14 * var(--er33-u));z-index:12;background:#41434b} #gameScreen .er33-chat-stone{filter:brightness(.67)} #gameScreen .er33-chat-stone::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23999' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");opacity:.3;mix-blend-mode:multiply;pointer-events:none} #gameScreen .er19-law>span{left:calc(18 * var(--er33-u));width:calc(45 * var(--er33-u))} #gameScreen .er33-merchant-sign{display:none} #gameScreen .er20-chat .classic-chat-row::before{display:none} #gameScreen .er20-chat .classic-chat-row .er33-chat-channel{display:flex!important;align-items:center;justify-content:center;width:calc(12 * var(--er33-u))!important;flex:0 0 calc(12 * var(--er33-u))!important;height:100%!important;background:#b554c3!important;color:white!important;border:0!important;padding:0!important;min-height:0!important;font:calc(10 * var(--er33-u)) Georgia!important} #gameScreen .er33-channel-menu{position:absolute;bottom:100%;left:0;display:flex;gap:0;background:#343844;border:1px ridge #b6aa8c;z-index:20} #gameScreen .er20-chat .classic-chat-row .er33-channel-menu button{display:block!important;width:auto!important;flex:none!important;padding:calc(3 * var(--er33-u))!important;font-size:calc(9 * var(--er33-u))!important;height:auto!important;min-height:0!important;border:1px ridge #817965!important;background:#33353e!important;color:#ede5cf!important;white-space:nowrap} #gameScreen .bottom-nav .hud17-key:not(:has(.hud17-itemname))>small{position:absolute!important;inset:0!important;display:flex;align-items:center;justify-content:center;font:italic bold calc(20 * var(--er33-u)) Georgia!important;color:#56575a!important;opacity:.28;text-shadow:1px 1px #08090b} #gameScreen .bottom-nav .hud17-key:has(.hud17-itemname)>small{opacity:0} #gameScreen .bottom-nav .hud17-key:has(.hud17-itemname):hover>small{opacity:.6} /* V3.3.1 clean client: one frame, no captured readouts, no black description panel. */ :root{--client-status-width:calc(152 * var(--er33-u));--client-shortcut-width:calc(196 * var(--er33-u));--client-frame:url('/assets/classic-remaster/clean-window.png')} #gameScreen .character-panel{width:var(--client-status-width)!important;height:calc(128 * var(--er33-u))!important;background:#30343d!important;border:calc(2 * var(--er33-u)) ridge #b7ad92!important;padding:calc(2 * var(--er33-u))!important;overflow:hidden!important} #gameScreen .er19-stats{position:relative!important;inset:auto!important;display:grid!important;grid-template-rows:22fr 26fr 26fr 26fr 26fr!important;gap:calc(3 * var(--er33-u))!important;height:100%!important;width:100%!important} #gameScreen .er19-head,#gameScreen .er19-duo,#gameScreen .er19-law,#gameScreen .er19-land{height:auto!important;min-height:0!important;margin:0!important} #gameScreen .er19-head{border:calc(2 * var(--er33-u)) ridge #b6ad96!important;border-radius:calc(7 * var(--er33-u))!important;padding:0 calc(3 * var(--er33-u))!important;background:#252c38!important} #gameScreen #er19-level,#gameScreen #er19-exp{font-size:calc(11 * var(--er33-u))!important} #gameScreen .er19-duo{display:grid!important;grid-template-columns:1fr 1fr!important;gap:calc(3 * var(--er33-u))!important} #gameScreen .er19-cell,#gameScreen .er19-wide{display:flex!important;position:relative!important;align-items:center!important;justify-content:space-between!important;gap:calc(3 * var(--er33-u))!important;border:calc(2 * var(--er33-u)) ridge #b5ac97!important;border-radius:calc(12 * var(--er33-u))!important;padding:0 calc(4 * var(--er33-u)) 0 calc(25 * var(--er33-u))!important;background:linear-gradient(#505969,#202734 28%,#222a37 72%,#4a5361)!important;box-shadow:inset 0 0 3px #0008!important;overflow:hidden!important;isolation:isolate} #gameScreen .er19-cell.er19-amber{background:linear-gradient(#a18553,#b5965e 50%,#6e5631)!important} #gameScreen .er19-cell i,#gameScreen .er19-wide i{display:block!important;position:absolute!important;left:calc(-1 * var(--er33-u));top:50%;transform:translateY(-50%);width:calc(24 * var(--er33-u))!important;height:calc(24 * var(--er33-u))!important;border:0!important;border-radius:50%!important;clip-path:circle(48%);padding:0!important;flex:none!important} #gameScreen .er19-cell span,#gameScreen .er19-law>span,#gameScreen .er19-law>b,#gameScreen #er19-landscape{position:static!important;inset:auto!important;height:auto!important;min-width:0!important;line-height:1.1!important;background:none!important;font:bold calc(12 * var(--er33-u)) Georgia,'ClassicTC',serif!important;color:#eeeadd!important;text-shadow:1px 1px #000!important;white-space:nowrap!important} #gameScreen .er19-cell span{width:100%;display:block;text-align:right} #gameScreen .er19-law>span{font-size:calc(10 * var(--er33-u))!important;width:auto!important} #gameScreen .er19-law>b{margin-left:auto} #gameScreen #er19-landscape{display:block!important;width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important;font-size:calc(11 * var(--er33-u))!important} #gameScreen .classic-log-box.er20-chat{left:var(--client-status-width)!important;right:var(--client-shortcut-width)!important;height:calc(128 * var(--er33-u))!important} #gameScreen .bottom-nav{width:var(--client-shortcut-width)!important;height:calc(128 * var(--er33-u))!important;padding:calc(4 * var(--er33-u)) calc(2 * var(--er33-u)) calc(26 * var(--er33-u))!important} #gameScreen .bottom-nav .hud17-key img{width:calc(42 * var(--er33-u))!important;height:calc(42 * var(--er33-u))!important} #gameScreen .bottom-nav button.er-classic-menu{height:calc(26 * var(--er33-u))!important} #gameScreen .er33-frame{border:calc(10 * var(--er33-u)) solid transparent!important;border-image:var(--client-frame) 50 fill stretch!important;border-radius:0!important;opacity:1!important;z-index:0!important;overflow:visible!important;box-shadow:none!important} #gameScreen #detailPanel,#gameScreen .zone-panel,.er18-window,.bag-modal,.er33-window,.er317-dialog{background:transparent!important;border:0!important;padding:calc(23 * var(--er33-u)) calc(14 * var(--er33-u)) calc(14 * var(--er33-u))!important;isolation:isolate} .er18-window>.er33-frame,.bag-modal>.er33-frame,.er317-dialog>.er33-frame{border:calc(10 * var(--er33-u)) solid transparent!important;border-image:var(--client-frame) 50 fill stretch!important;z-index:-1!important;display:block!important} #gameScreen #detailPanel>.er33-frame,#gameScreen .zone-panel>.er33-frame,.er33-shop>.er33-frame{z-index:-1!important;display:block!important} #gameScreen #detailPanel,#gameScreen #detailPanel[data-classic-panel=inventory],.er18-window{width:calc(224 * var(--er33-u))!important;height:calc(372 * var(--er33-u))!important;max-height:calc(100dvh - 136 * var(--er33-u))!important;background-image:none!important} #gameScreen #detailPanel[data-classic-panel=inventory]{padding:calc(22 * var(--er33-u)) calc(28 * var(--er33-u)) calc(14 * var(--er33-u)) calc(12 * var(--er33-u))!important} #gameScreen #detailBody{background:transparent!important} #gameScreen #detailBody .bag-grid{grid-auto-rows:calc(46 * var(--er33-u))!important;background:transparent!important;border:0!important} #gameScreen #detailBody .bag-grid .bag-tile{height:calc(46 * var(--er33-u))!important;border:1px solid #656458!important;background:radial-gradient(#20252c,#0f1319)!important} #gameScreen #detailBody .bag-grid .item-pixel-image{width:calc(37 * var(--er33-u))!important;height:calc(37 * var(--er33-u))!important} #gameScreen .er33-bag-description{flex:0 0 calc(72 * var(--er33-u));padding:calc(5 * var(--er33-u)) 0 0;border:0!important;background:transparent!important;color:#e6e3d8;font:calc(11 * var(--er33-u))/1.2 'PMingLiU','ClassicTC',serif!important;box-shadow:none!important} #gameScreen .er33-bag-rail{right:calc(10 * var(--er33-u));width:calc(13 * var(--er33-u));top:calc(25 * var(--er33-u));bottom:calc(15 * var(--er33-u))} #gameScreen #detailPanel>.section-title,.er18-head,.bag-modal>h3{left:calc(12 * var(--er33-u));right:calc(30 * var(--er33-u));height:calc(19 * var(--er33-u))!important;font-size:calc(11 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title{font-size:calc(10 * var(--er33-u))!important} #gameScreen #detailPanel>.er-close-x,#gameScreen .zone-panel>.er-close-x,.bag-modal>.er-close-x,.er18-close,.er33-close{right:calc(9 * var(--er33-u))!important;top:calc(5 * var(--er33-u))!important;background:transparent!important;font-size:calc(9 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=stats],#gameScreen #detailPanel:has(.er-classic-character){width:calc(310 * var(--er33-u))!important} #gameScreen .er-classic-char-header{background:transparent!important;font-size:calc(11 * var(--er33-u));margin-bottom:calc(7 * var(--er33-u))} #gameScreen .er-classic-char-info .er316-attr{background:transparent!important;font-size:calc(11 * var(--er33-u));min-height:calc(18 * var(--er33-u));height:calc(18 * var(--er33-u))} #gameScreen .er-classic-char-line b{background:transparent!important;border:0!important;font-weight:normal} #gameScreen .er-classic-char-line{font-size:calc(10 * var(--er33-u));padding:calc(3 * var(--er33-u))} #gameScreen .er-classic-char-equipment{height:calc(260 * var(--er33-u))} #gameScreen .er-classic-slot{width:calc(32 * var(--er33-u));height:calc(32 * var(--er33-u));background:#20252b;border:1px inset #797969;padding:0;box-shadow:none} #gameScreen .er-classic-char-summary{gap:calc(4 * var(--er33-u));padding-top:calc(7 * var(--er33-u))} .er18-grid{background:transparent!important} .er18-tile{height:calc(46 * var(--er33-u))!important} .er18-glyph,.er18-glyph img{width:calc(37 * var(--er33-u))!important;height:calc(37 * var(--er33-u))!important} .er18-tabs{margin-bottom:calc(5 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=settings]{width:calc(246 * var(--er33-u))!important;height:calc(372 * var(--er33-u))!important;padding:calc(24 * var(--er33-u)) calc(12 * var(--er33-u)) calc(20 * var(--er33-u))!important;background-image:none!important} #gameScreen #detailPanel[data-classic-panel=settings] #detailBody,.er33-automation{background:transparent!important} .er33-settings-tabs{top:calc(-17 * var(--er33-u));right:calc(18 * var(--er33-u));height:calc(17 * var(--er33-u))} .er33-settings-footer{bottom:0;background:transparent!important} .er33-settings-buffs .er33-settings-slot{height:calc(40 * var(--er33-u))} .er33-shop{width:calc(250 * var(--er33-u));height:calc(372 * var(--er33-u))} .er33-shop-footer{background:transparent!important;left:calc(15 * var(--er33-u));right:calc(15 * var(--er33-u));bottom:calc(8 * var(--er33-u))} .er33-shop-title{padding-left:calc(15 * var(--er33-u));top:calc(5 * var(--er33-u))} #gameScreen .er33-shop{padding:calc(27 * var(--er33-u)) calc(15 * var(--er33-u)) calc(28 * var(--er33-u))!important} #gameScreen .arena-top{position:absolute!important;bottom:calc(4 * var(--er33-u))!important;z-index:40;padding:0!important} #gameScreen #detailBody>.bag-tabs,#gameScreen #detailBody>.bag-note,#gameScreen #detailBody>.bag-filters,#gameScreen #detailBody>.er33-old-inventory-action{display:none!important} .er18-empty{font-size:calc(10 * var(--er33-u));color:#c5bfaa;padding:calc(8 * var(--er33-u))} @media(max-width:600px){:root{--client-status-width:26%;--client-shortcut-width:30%}#gameScreen .classic-log-box.er20-chat{left:26%!important;right:30%!important}#gameScreen .character-panel{width:26%!important}#gameScreen .bottom-nav{width:30%!important}#gameScreen .er19-cell i,#gameScreen .er19-wide i{width:calc(16 * var(--er33-u))!important;height:calc(16 * var(--er33-u))!important}#gameScreen .er19-cell,#gameScreen .er19-wide{padding-left:calc(16 * var(--er33-u))!important}#gameScreen .er19-cell span,#gameScreen #er19-exp,#gameScreen #er19-level,#gameScreen #er19-landscape{font-size:calc(9 * var(--er33-u))!important}#gameScreen .er19-law>span{display:none}#gameScreen #detailPanel[data-classic-panel=inventory]{max-width:calc(var(--er3419-vw, 1vw) * 49)!important}.er18-window{max-width:calc(var(--er3419-vw, 1vw) * 49)!important}.er33-shop{max-width:calc(var(--er3419-vw, 1vw) * 49)!important}} #gameScreen #detailPanel[data-classic-panel=settings]>.er33-frame{display:block!important} #gameScreen .arena:not([hidden]){inset:0 0 calc(132 * var(--er33-u))!important} #er-item-tooltip{position:fixed!important;z-index:99999;max-width:min(calc(240 * var(--er33-u)),calc(calc(var(--er3419-vw, 1vw) * 100) - 16px));min-width:0;width:max-content;box-sizing:border-box;pointer-events:none;white-space:pre-line;color:#eeede4;padding:calc(4 * var(--er33-u)) calc(5 * var(--er33-u));background:rgba(0,0,0,.74)!important;border:1px solid #978d68!important;border-image:none!important;line-height:1.2;overflow-wrap:anywhere} #er-item-tooltip.er-pinned{pointer-events:auto} #er-item-tooltip .er-tip-name{font:bold calc(10 * var(--er33-u)) 'ClassicTC',serif;margin-bottom:calc(2 * var(--er33-u));color:#eeede4} #er-item-tooltip .er-tip-action{display:block;pointer-events:auto;background:#3b404a;color:#eee2c6;border:1px ridge #b9ad8e;margin-top:6px} #gameScreen .er-classic-char-info .er316-attr{border:0!important;box-shadow:none!important} .er317-dialog{width:min(460px,calc(var(--er3419-vw, 1vw) * 95))} .er317-dialog h3{margin:0 0 10px;color:#dfd7c0} .er317-detail{border-top:1px solid #79756a;border-bottom:1px solid #79756a;padding:10px 0;background:transparent;color:#e6dcc0} #gameScreen .ghost,#gameScreen .gold,#gameScreen .blue,#gameScreen .automation-row button{background:#383e48!important;color:#e8dfc9!important;border:1px ridge #a59b83!important;border-radius:0!important;box-shadow:none!important} #toast,.toast,#hud17-notice{font-family:'PMingLiU','ClassicTC',serif!important;background:#343944!important;border-radius:0!important;color:#e6ddc4!important} @media(min-width:600px) and (max-width:1300px){#gameScreen #detailPanel[data-classic-panel=stats],#gameScreen #detailPanel:has(.er-classic-character){width:calc(282 * var(--er33-u))!important}} #gameScreen #detailPanel[data-classic-panel=inventory]{height:calc(384 * var(--er33-u))!important} /* V3.3.2: standard menu routing; custom controls are no longer client entry points. */ #gameScreen .battle-controls,#gameScreen #heal,#gameScreen #er-system-controls,#gameScreen #er-companions{display:none!important} .er-standard-window{position:fixed;z-index:85;width:min(calc(246 * var(--er33-u)),calc(var(--er3419-vw, 1vw) * 100));height:calc(330 * var(--er33-u));padding:calc(20 * var(--er33-u)) calc(14 * var(--er33-u));box-sizing:border-box;color:#eee4c4;font-size:calc(10 * var(--er33-u));font-family:'ERClassicSerif',serif;isolation:isolate} .er-standard-window>header{display:flex;justify-content:space-between;align-items:center;cursor:move;margin-bottom:calc(12 * var(--er33-u));height:calc(16 * var(--er33-u))} .er-standard-window button,.er-standard-window select{font:inherit;color:inherit;border:1px solid #9d8d64;background:#46443e;padding:calc(4 * var(--er33-u));cursor:pointer;border-radius:0} .er-standard-window button:disabled{opacity:.45;cursor:not-allowed} .er-standard-body{height:calc(100% - 28 * var(--er33-u));overflow:auto;display:flex;flex-direction:column;gap:calc(8 * var(--er33-u))} .er-standard-body nav{display:flex;gap:calc(4 * var(--er33-u))} .er-standard-body p{margin:0;line-height:1.6} .er-standard-body label{display:flex;align-items:center;gap:calc(6 * var(--er33-u))} .er-standard-body input{accent-color:#b29c6a} .er-standard-body small{line-height:1.6;opacity:.8;margin-top:auto} #gameScreen.er-hide-unit-names .unit-label,#gameScreen.er-hide-unit-names #playerLabel{visibility:hidden!important} #gameScreen.er-hide-unit-hp .monster-hp-track,#gameScreen.er-hide-unit-hp .monster-hp-text{visibility:hidden!important} #gameScreen.er-hide-effects .battle-effect,#gameScreen.er-hide-effects .damage-number,#gameScreen.er-hide-effects .er322-impact{visibility:hidden!important} #gameScreen[data-chat-size="large"] .classic-log-text{font-size:calc(13 * var(--er33-u))!important} #gameScreen.er-hide-effects .projectile,#gameScreen.er-hide-effects #damage{visibility:hidden!important} #gameScreen .monster-card[data-monster-id]{cursor:crosshair} #gameScreen.er-hide-effects #damageNumber{visibility:hidden!important} /* Seven native icons and the overflow arrow, as in the supplied client HUD. */ #gameScreen .bottom-nav button.er-classic-menu{left:calc(var(--menu-index) * 13.42857%)!important;width:13.42857%!important} #gameScreen .bottom-nav .er-menu-more{display:block!important;position:absolute;right:0;bottom:calc(-1 * var(--er33-u));width:6%;height:calc(22 * var(--er33-u));padding:0;border:1px solid #9b8b63;border-radius:0;background:#c2ae83;color:#403b30;font:bold calc(17 * var(--er33-u)) Georgia;cursor:pointer} #gameScreen .er-standard-overflow{position:absolute;right:0;bottom:calc(24 * var(--er33-u));z-index:150;display:flex;flex-direction:column;width:calc(92 * var(--er33-u));padding:calc(3 * var(--er33-u));border:1px solid #b5a078;background:#333331;gap:calc(3 * var(--er33-u))} #gameScreen .er-standard-overflow[hidden]{display:none!important} #gameScreen .er-standard-overflow .er-overflow-menu{display:block!important;position:static!important;width:100%!important;height:auto!important;border:1px solid #9a885e;background:#49473f;color:#f0e2bf;padding:calc(5 * var(--er33-u));font-size:calc(11 * var(--er33-u));cursor:pointer} #gameScreen .er-overflow-menu .er-menu-label{display:block!important} #gameScreen .bottom-nav>button.er-menu-more:not(.hud17-key):not(.er-classic-menu){display:block!important} #gameScreen .er20-vitals .er20-hp #heal{display:none!important;pointer-events:none!important} /* V3.4.1: panels rebuilt from the user's three native client references. */ #gameScreen #detailPanel>.er33-frame.er-ref-frame,.er18-window>.er33-frame.er-ref-frame,.er33-frame.er-ref-frame{border:0!important;border-image:none!important;background:#30323a!important;box-shadow:none!important} .er-ref-border{position:absolute;display:block;pointer-events:none} .er-ref-border.tl,.er-ref-border.tr,.er-ref-border.bl,.er-ref-border.br{width:calc(12 * var(--er33-u));height:calc(12 * var(--er33-u))} .er-ref-border.tl{left:0;top:0}.er-ref-border.tr{right:0;top:0}.er-ref-border.bl{left:0;bottom:0}.er-ref-border.br{right:0;bottom:0} .er-ref-border.t,.er-ref-border.b{left:calc(12 * var(--er33-u));right:calc(12 * var(--er33-u));height:calc(8 * var(--er33-u))}.er-ref-border.t{top:0}.er-ref-border.b{bottom:0} .er-ref-border.l,.er-ref-border.r{top:calc(12 * var(--er33-u));bottom:calc(12 * var(--er33-u));width:calc(8 * var(--er33-u))}.er-ref-border.l{left:0}.er-ref-border.r{right:0} #gameScreen #detailPanel[data-classic-panel=stats],#gameScreen #detailPanel:has(.er-classic-character){width:calc(247 * var(--er33-u))!important;height:calc(330 * var(--er33-u))!important;padding:0!important;max-width:calc(var(--er3419-vw, 1vw) * 100)!important} #gameScreen #detailPanel[data-classic-panel=stats]>.section-title{display:none!important} #gameScreen #detailPanel[data-classic-panel=stats] #detailBody{position:absolute;inset:0;display:block!important;margin:0;padding:0!important;overflow:visible!important;height:100%!important} #gameScreen .er-classic-character{position:relative;display:block!important;width:100%;height:calc(330 * var(--er33-u));margin:0!important;padding:0!important;border:0!important;background:transparent!important;font:calc(9 * var(--er33-u))/1.1 Georgia,'PMingLiU',serif;color:#e7e7dc;text-shadow:1px 1px #18191c} #gameScreen .er-classic-char-info{display:contents!important} #gameScreen .er-classic-character .er-ref-stat{position:absolute;left:calc(var(--x) * var(--er33-u));top:calc(var(--y) * var(--er33-u));width:calc(var(--w) * var(--er33-u));height:calc(12 * var(--er33-u))!important;min-height:0!important;display:flex;align-items:center;justify-content:space-between;margin:0!important;padding:0!important;background:transparent!important;border:0!important;font:inherit!important;box-sizing:border-box;gap:calc(3 * var(--er33-u))} #gameScreen .er-ref-stat>b{font:inherit;min-width:calc(35 * var(--er33-u));text-align:center;background:#282b30;border:1px inset #66686a;box-sizing:border-box;color:#e6e8e3} #gameScreen .er-ref-stat.hp>b{color:#e2a8ba}#gameScreen .er-ref-stat.mp>b{color:#a9c9ed} #gameScreen .er-ref-stat.er-classic-char-header{font-size:calc(9 * var(--er33-u))!important;margin:0!important;gap:calc(3 * var(--er33-u))!important} #gameScreen .er-ref-stat.er-classic-char-header>b{flex:1;color:#b7e1e4;text-align:right;white-space:pre} #gameScreen .er-ref-stat.er316-attr>b{min-width:calc(26 * var(--er33-u))} #gameScreen .er-ref-stat.er316-attr button{position:absolute;left:100%;width:calc(10 * var(--er33-u));height:calc(10 * var(--er33-u));padding:0;font-size:calc(8 * var(--er33-u));min-height:0} #gameScreen .er-classic-character .er-classic-slot{position:absolute!important;left:calc(var(--x) * var(--er33-u))!important;top:calc(var(--y) * var(--er33-u))!important;width:calc(32 * var(--er33-u))!important;height:calc(32 * var(--er33-u))!important;border:1px inset #65696b!important;background:#252930!important;box-shadow:none!important;padding:0!important;min-height:0!important;transform:translate(-50%,-50%)} #gameScreen .er-classic-character .er-classic-slot img{width:100%!important;height:100%!important;object-fit:contain} #gameScreen .er-ref-stat.alignment-label{font-size:calc(11 * var(--er33-u))!important;justify-content:center}#gameScreen .er-ref-stat.alignment-value>b{color:#829be5;width:100%} #gameScreen .er-ref-stat.resistance-title>b{display:none} #gameScreen .er-ref-time{display:none} #gameScreen #detailPanel[data-classic-panel=inventory]{width:calc(204 * var(--er33-u))!important;height:calc(374 * var(--er33-u))!important;padding:calc(25 * var(--er33-u)) calc(26 * var(--er33-u)) calc(20 * var(--er33-u)) calc(24 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=inventory] #detailBody{display:flex!important;flex-direction:column;height:100%!important;padding:0!important;overflow:visible!important} #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title{display:none!important} #gameScreen #detailPanel[data-classic-panel=inventory] .er33-frame{background:#141824!important} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:calc(36 * var(--er33-u))!important;flex:0 0 calc(288 * var(--er33-u))!important;min-height:0!important;height:calc(288 * var(--er33-u))!important;gap:0!important;overflow:auto!important;scrollbar-width:none} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid .bag-tile{height:calc(36 * var(--er33-u))!important;border:0!important;outline:0;background:transparent!important;box-shadow:none!important} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid .bag-tile:hover{box-shadow:inset 0 0 0 1px #c1ad75!important} #gameScreen #detailPanel[data-classic-panel=inventory] .item-pixel-image{width:calc(32 * var(--er33-u))!important;height:calc(32 * var(--er33-u))!important} #gameScreen .er33-bag-description,#gameScreen .bag-tabs,#gameScreen .bag-filters,#gameScreen .bag-note{display:none!important} #gameScreen .er33-bag-rail{right:calc(8 * var(--er33-u));top:calc(22 * var(--er33-u));bottom:calc(15 * var(--er33-u));width:calc(13 * var(--er33-u));display:flex;flex-direction:column;justify-content:space-between} .er18-window{width:calc(206 * var(--er33-u))!important;height:calc(364 * var(--er33-u))!important;padding:calc(20 * var(--er33-u)) calc(17 * var(--er33-u)) calc(17 * var(--er33-u)) calc(25 * var(--er33-u))!important} .er18-head{left:calc(9 * var(--er33-u))!important;top:calc(3 * var(--er33-u))!important;font-size:calc(9 * var(--er33-u))!important;height:calc(13 * var(--er33-u))!important} .er18-head .er18-close{right:calc(-19 * var(--er33-u))!important;top:0!important} .er18-content{display:flex!important;flex-direction:column;overflow:visible!important;height:100%;gap:calc(3 * var(--er33-u))} .er18-content .er18-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:calc(40 * var(--er33-u));height:calc(240 * var(--er33-u));flex:0 0 calc(240 * var(--er33-u));overflow:auto!important;scrollbar-width:none} .er18-content .er18-tile{height:calc(40 * var(--er33-u))!important;border:1px solid #746a52!important;background:#12151d!important;opacity:1!important;padding:calc(2 * var(--er33-u))!important} .er18-glyph,.er18-glyph img{width:calc(34 * var(--er33-u))!important;height:calc(34 * var(--er33-u))!important} .er-ref-spell-description{flex:1;min-height:0;white-space:pre-line;overflow:auto;border:1px solid #746a52;background:#161a23;padding:calc(4 * var(--er33-u));font:calc(10 * var(--er33-u))/1.25 'PMingLiU',serif;color:#e1ddca} .er-ref-spell-footer{font:calc(9 * var(--er33-u)) Georgia,serif;color:#ddd8c7;white-space:nowrap} .er-ref-spell-rail{position:absolute;right:calc(4 * var(--er33-u));top:calc(24 * var(--er33-u));bottom:calc(25 * var(--er33-u));display:flex;flex-direction:column;justify-content:space-between;width:calc(10 * var(--er33-u))} .er-ref-spell-rail button{padding:0;min-height:0;border:1px ridge #a28f66;background:#56554c;color:#e3dbc2;font-size:calc(8 * var(--er33-u));cursor:pointer} body.er-spell-target #gameScreen .battlefield,body.er-spell-target #gameScreen .monster-card{cursor:crosshair!important} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid{grid-auto-rows:calc(38 * var(--er33-u))!important;height:calc(304 * var(--er33-u))!important;flex-basis:calc(304 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid .bag-tile{height:calc(38 * var(--er33-u))!important} .er-ref-border.tl,.er-ref-border.tr{transform:scaleY(-1)} #gameScreen #detailPanel[data-classic-panel=stats]>.section-title{display:flex!important;height:calc(14 * var(--er33-u))!important;left:calc(8 * var(--er33-u))!important;right:calc(30 * var(--er33-u))!important;top:0!important} #gameScreen #detailPanel[data-classic-panel=stats] #detailTitle{visibility:hidden} .er-ref-spell-description{font-family:'PMingLiU','ClassicTC','MingLiU',serif!important} .er-standard-window{font-family:'PMingLiU','ClassicTC','MingLiU',serif!important} #gameScreen .er-classic-character{font-family:Georgia,'PMingLiU','ClassicTC','MingLiU',serif!important} #gameScreen #detailPanel[data-classic-panel=stats] #detailTitle{visibility:visible!important;color:transparent!important;font-size:0!important} #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title{display:flex!important;height:calc(14 * var(--er33-u))!important;left:calc(8 * var(--er33-u))!important;right:calc(30 * var(--er33-u))!important;top:0!important;color:transparent!important;font-size:0!important} /* V3.4.2 visual correction: real corners, native dimensions, independent inset. */ .er-ref-border.tl,.er-ref-border.tr{transform:none!important} .er-ref-frame>.er-ref-border.tl,.er-ref-frame>.er-ref-border.tr,.er-ref-frame>.er-ref-border.bl,.er-ref-frame>.er-ref-border.br{width:calc(7 * var(--er33-u));height:calc(7 * var(--er33-u))} .er-ref-frame>.er-ref-border.t,.er-ref-frame>.er-ref-border.b{left:calc(7 * var(--er33-u));right:calc(7 * var(--er33-u));height:calc(3 * var(--er33-u))} .er-ref-frame>.er-ref-border.l,.er-ref-frame>.er-ref-border.r{top:calc(7 * var(--er33-u));bottom:calc(7 * var(--er33-u));width:calc(3 * var(--er33-u))} .er-native-inset{display:none;position:absolute;inset:calc(8 * var(--er33-u)) calc(20 * var(--er33-u)) calc(30 * var(--er33-u)) calc(22 * var(--er33-u))} .er-native-inset .er-ref-border.tl,.er-native-inset .er-ref-border.tr,.er-native-inset .er-ref-border.bl,.er-native-inset .er-ref-border.br{width:calc(6 * var(--er33-u));height:calc(6 * var(--er33-u))} .er-native-inset .er-ref-border.t,.er-native-inset .er-ref-border.b{left:calc(6 * var(--er33-u));right:calc(6 * var(--er33-u));height:calc(5 * var(--er33-u))} .er-native-inset .er-ref-border.l,.er-native-inset .er-ref-border.r{top:calc(6 * var(--er33-u));bottom:calc(6 * var(--er33-u));width:calc(5 * var(--er33-u))} #gameScreen #detailPanel[data-classic-panel=inventory]{height:calc(349 * var(--er33-u))!important;padding:calc(29 * var(--er33-u)) calc(29 * var(--er33-u)) calc(27 * var(--er33-u)) calc(27 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=inventory] .er-native-inset{display:block;inset:calc(25 * var(--er33-u)) calc(25 * var(--er33-u)) calc(24 * var(--er33-u)) calc(23 * var(--er33-u))} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid{grid-auto-rows:calc(36.5 * var(--er33-u))!important;height:calc(292 * var(--er33-u))!important;flex-basis:calc(292 * var(--er33-u))!important;background:#10141c!important} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid .bag-tile{height:calc(36.5 * var(--er33-u))!important;border:1px solid #534d3c!important} .er18-window{width:calc(196 * var(--er33-u))!important;height:calc(338 * var(--er33-u))!important;padding:calc(14 * var(--er33-u)) calc(25 * var(--er33-u)) calc(17 * var(--er33-u)) calc(27 * var(--er33-u))!important} .er18-window .er-native-inset{display:block} .er18-content .er18-grid{grid-auto-rows:calc(36 * var(--er33-u))!important;height:calc(180 * var(--er33-u))!important;flex-basis:calc(180 * var(--er33-u))!important;gap:0!important} .er18-content .er18-tile{height:calc(36 * var(--er33-u))!important;background:#10141c!important;border:1px solid #5d5542!important} .er18-content .er18-tile.er-unlearned{background:#10141c!important;opacity:1!important} .er18-head{height:calc(10 * var(--er33-u))!important;top:0!important;font-size:0!important} .er18-head .er18-close{font-size:calc(9 * var(--er33-u))!important;right:calc(-8 * var(--er33-u))!important} .er-ref-spell-description{background:#0e1117!important;color:#dedbc9;font-size:calc(9 * var(--er33-u));padding:calc(3 * var(--er33-u))} #gameScreen #detailPanel>.er33-frame.er-ref-frame,.er18-window>.er33-frame.er-ref-frame{background:repeating-linear-gradient(37deg,#33353a 0px,#33353a 1px,#36383c 1px,#36383c 3px)!important} #gameScreen #detailPanel[data-classic-panel=inventory]>.er33-frame.er-ref-frame{background:#151922!important} .er18-window>.er33-frame.er-ref-frame{background:#222630!important} /* Persistent effect icons live in the field, outside the hidden legacy character-info. */ #gameScreen>#er-active-effects{position:absolute!important;left:auto!important;right:calc(6 * var(--er33-u));top:calc(8 * var(--er33-u));z-index:10000;display:flex;flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-start;gap:calc(6 * var(--er33-u));max-height:calc(100% - var(--er-classic-hud-height) - 24px);color:#f1e9cf;font:calc(9 * var(--er33-u)) 'ClassicTC',serif;pointer-events:auto} #gameScreen>#er-active-effects[hidden]{display:none!important} .er-status-icon{position:relative;width:calc(32 * var(--er33-u));height:calc(40 * var(--er33-u));box-sizing:border-box;border:0;background:transparent;text-align:center;display:flex;justify-content:center;align-items:flex-start;padding-top:1px;text-shadow:1px 1px #000} .er-status-icon img{width:calc(32 * var(--er33-u));height:calc(32 * var(--er33-u));object-fit:contain;image-rendering:pixelated} .er-status-icon small{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);font:calc(8 * var(--er33-u)) Georgia,'ClassicTC',serif;line-height:1.05;color:#f1e9cf} .er-status-icon.is-debuff small{color:#f5b3aa} /* Monster artwork size is controlled by screen-space species ratios. */ #gameScreen .monster-card .monster-sprite{scale:1;transform-origin:center bottom} #gameScreen .monster-card[data-monster-id],#gameScreen .monster-card[data-monster-id] *{cursor:url('/assets/cursors/attack-sword.svg') 3 2,pointer!important} body.er-spell-target #gameScreen .monster-card[data-monster-id],body.er-spell-target #gameScreen .monster-card[data-monster-id] *{cursor:crosshair!important} #playerSprite.er344-pose{background-image:none!important;animation:none!important;transform:none!important;overflow:visible!important} #playerSprite>.er344-class-pose{position:absolute;bottom:0;left:50%;width:250px;height:250px;transform:translateX(-50%);overflow:hidden;pointer-events:none} #playerSprite>.er344-class-pose[data-job=elf]{width:260px;height:250px} /* ATS uses the stone window language with dense six-column item slots. */ .er-ats-window{position:absolute;right:calc(48 * var(--er33-u,1px));top:calc(8 * var(--er33-u,1px));width:calc(288 * var(--er33-u,1px));height:calc(408 * var(--er33-u,1px));max-height:calc(100% - var(--er-classic-hud-height,132px) - 16 * var(--er33-u,1px));z-index:250;color:#c9c8bf;background:#292b2b;border:3px ridge #85847c;font:calc(12 * var(--er33-u,1px))/1.35 '新細明體',serif;display:flex;flex-direction:column;box-sizing:border-box;box-shadow:0 3px 10px #000b} .er-ats-window>header,.er-ats-window>nav,.er-ats-window>footer{display:flex;align-items:center;justify-content:space-between;gap:2px;flex-shrink:0;background:linear-gradient(#555854,#292d2b);padding:3px} .er-ats-window button,.er-ats-window select,.er-ats-window input{font:inherit;color:#d5d1bd;background:#171b19;border:1px solid #706b57;box-sizing:border-box} .er-ats-window button{cursor:pointer;padding:3px 6px}.er-ats-window button:hover,.er-ats-window nav .active{background:#4e5349}.er-ats-window button:disabled{cursor:default;opacity:.45} .er-ats-window>nav>button{flex:1;padding:4px 1px}.er-ats-body{overflow:auto;flex:1;padding:5px;background:linear-gradient(110deg,#4b4d49aa,#343735aa)} .er-ats-body fieldset{border:0;border-bottom:1px solid #818376;padding:3px 0 7px;margin:0 0 5px}.er-ats-body legend{padding:0;color:#d9d6c9}.er-ats-body label{display:block;margin:3px 0}.er-ats-body small{display:block;font-size:.9em;line-height:1.45;color:#bdbbb0}.er-ats-body p{margin:5px 0 10px} .er-ats-window input[type=number]{width:3.6em;padding:1px}.er-ats-window select{max-width:100%;margin:2px}.er-ats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px}.er-ats-window .er-ats-slot{width:calc(42 * var(--er33-u,1px));height:calc(39 * var(--er33-u,1px));padding:0;background:#101412cc;border:2px groove #706b57;overflow:hidden;vertical-align:middle}.er-ats-slot img{width:85%;height:85%;object-fit:contain;image-rendering:pixelated}.er-ats-slot small{font-size:.8em;overflow:hidden}.er-ats-recovery{display:flex;justify-content:space-between}.er-ats-recovery>div{width:48%}.er-ats-recovery label{font-size:.92em}.er-ats-window footer small{font-size:.8em;white-space:nowrap}.er-ats-window footer button{padding:3px}.er-ats-body fieldset>button:not(.er-ats-slot){float:right} .er-ats-picker{position:absolute;inset:25% 5% auto;background:#30342f;border:3px ridge #9a947b;padding:12px;box-shadow:0 0 0 100vmax #0004;z-index:4}.er-ats-picker select{display:block;width:100%;margin:10px 0}.er-ats-window[data-running=true]>header{color:#b7db9a} .er-ats-window>.er33-frame{z-index:0!important}.er-ats-window>header,.er-ats-window>nav,.er-ats-window>.er-ats-body,.er-ats-window>footer{position:relative;z-index:1}.er-ats-window>.er-ats-picker{z-index:20} .er-ats-window{font-family:'PMingLiU','ClassicTC','MingLiU',serif}.er-ats-window input[type=number]{display:inline-block!important;width:3.1em!important;margin:0!important;padding:1px!important}.er-ats-window input[type=checkbox]{display:inline-block!important;width:auto!important;margin:0 4px 0 0!important}.er-ats-recovery label{white-space:nowrap;font-size:.86em}.er-ats-body{padding:calc(5 * var(--er33-u,1px))}.er-ats-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.er-ats-window .er-ats-grid .er-ats-slot{width:100%;height:calc(35 * var(--er33-u,1px))}.er-ats-window>footer{font-size:.8em}.er-ats-window>header,.er-ats-window>nav{font-size:.92em} .er-ats-body legend{display:flex;width:100%;justify-content:space-between;align-items:center}.er-ats-body legend button{padding:1px 7px;font-size:.85em} /* V3.4.6: spell grid fills the window; descriptions appear only over a hovered/focused learned spell. */ .er18-content .er18-grid{height:auto!important;flex:1 1 0!important;min-height:0!important} .er-ref-spell-description{display:none;position:absolute;left:calc(27 * var(--er33-u));right:calc(25 * var(--er33-u));bottom:calc(25 * var(--er33-u));flex:none;max-height:calc(72 * var(--er33-u));height:auto;z-index:20;pointer-events:none;background:rgba(12,15,18,.85)!important;border:1px solid #746a52} .er18-window:has(.er18-tile.learned:hover) .er-ref-spell-description,.er18-window:has(.er18-tile.learned:focus) .er-ref-spell-description{display:block} .er-ref-spell-footer{flex-shrink:0} .er-standard-window>.er33-frame{z-index:0!important}.er-standard-window>header,.er-standard-window>.er-standard-body{position:relative;z-index:11}.er-standard-body>button{flex-shrink:0} .er-standard-body>[data-ats-action]{color:#eee8ce;border-color:#b3a270} /* V3.4.7 independent character/equipment window. */ #gameScreen .er-stats-window{position:absolute;left:0;top:0;width:calc(247 * var(--er33-u));height:calc(330 * var(--er33-u));max-width:calc(var(--er3419-vw, 1vw) * 100);max-height:100dvh;z-index:9998;background:repeating-linear-gradient(37deg,#33353a 0,#33353a 1px,#36383c 1px,#36383c 3px);box-sizing:border-box} .er-stats-window>.er33-frame{z-index:0!important}.er-stats-window>.er-stats-body{position:relative;z-index:1;height:100%}.er-stats-window>.er-stats-header{position:absolute;left:0;right:0;top:0;height:calc(15 * var(--er33-u));z-index:15;cursor:move;touch-action:none}.er-stats-header>button{position:absolute;right:calc(5 * var(--er33-u));top:0;background:none;border:0;color:#eee9d4;font:italic bold calc(10 * var(--er33-u)) Georgia,serif;cursor:pointer} #gameScreen .er-ref-stat.er-classic-char-header>b{background:transparent;border:0} #gameScreen .er-classic-slot.empty{background:rgba(25,29,31,.32)!important;border-color:#484d50!important} #gameScreen .er-stats-window{max-height:calc(100dvh - var(--er-classic-hud-height,180px) - 8px)} .er304-gold-tile .er-currency-count{font-size:calc(8 * var(--er33-u))!important;letter-spacing:-.03em;max-width:100%} /* V3.4.9: one authoritative square spell grid, including dimmed unlearned icons. */ #er18-book .er18-content>.er18-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:calc(36 * var(--er33-u))!important;align-content:start!important;flex:1 1 0!important;min-height:0!important;height:auto!important;overflow-y:auto!important;overflow-x:hidden!important;gap:0!important} #er18-book .er18-grid>.er18-tile{width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:1;box-sizing:border-box} #er18-book .er18-grid>.er-unlearned img{opacity:.38;filter:grayscale(.65)} /* V3.4.23 ability/equipment uses the reference layout, live slots and a clean figure layer. */ #gameScreen .er-stats-window{background:#53545b url('/assets/classic-remaster/hud-stone-v3437.png')!important;border:0!important;overflow:hidden;isolation:isolate} #gameScreen .er-stats-window>.er33-frame.er-ref-frame{border:0!important;border-image:none!important;background:#53545b url('/assets/classic-remaster/hud-stone-v3437.png')!important;box-shadow:none!important} #gameScreen .er-stats-window>.er33-frame>.er-ref-border.tr,#gameScreen .er-stats-window>.er33-frame>.er-ref-border.r,#gameScreen .er-stats-window>.er33-frame>.er-ref-border.br{transform:scaleX(-1)!important} #gameScreen .er-classic-character{font-family:'Trebuchet MS',Arial,sans-serif!important;font-weight:bold!important;font-size:calc(9.5 * var(--er33-u))!important;color:#e6e7dc;text-shadow:1px 1px 1px #111} .er3423-paperdoll{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;pointer-events:none;z-index:0} #gameScreen .er-classic-character .er-ref-stat,#gameScreen .er-classic-character .er-classic-slot{z-index:1} #gameScreen .er-ref-stat>b{background:#3b3c43!important;border:1px inset #64656b!important;line-height:1.05} #gameScreen .er-ref-stat.er-classic-char-header>b{background:#45464c!important;color:#c6e4e3;text-align:center} #gameScreen .er-ref-stat.er-classic-char-header{gap:calc(2 * var(--er33-u))!important} #gameScreen .er-ref-stat.alignment-label>b{background:transparent!important;border:0!important;color:#9fb9cc!important;text-shadow:1px 1px #101418} #gameScreen .er-classic-character .er-classic-slot{background:#292e32!important;border:1px inset #65696d!important;box-shadow:inset 1px 1px 2px #1115!important} #gameScreen .er-classic-character .er-classic-slot.empty{opacity:.78} #gameScreen .er-classic-character .er-classic-slot img{width:90%!important;height:90%!important;margin:5%;filter:none!important} #gameScreen .er-ref-stat.er-classic-char-header>b{display:grid;grid-template-columns:calc(22 * var(--er33-u)) 1fr;align-items:center} #gameScreen .er3423-level{color:#e5e6dd;text-align:center}#gameScreen .er3423-exp{color:#b9d6d8;text-align:center} #gameScreen .er-ref-stat.hp>b,#gameScreen .er-ref-stat.mp>b,#gameScreen .er-ref-stat.ac>b{width:calc(60 * var(--er33-u));flex-shrink:0} #gameScreen .er-ref-stat.alignment-label>b{padding:calc(1 * var(--er33-u)) calc(4 * var(--er33-u));border:1px solid #4d606a!important;background:#334c58!important;border-radius:calc(4 * var(--er33-u));color:#bddef0!important} #gameScreen .er-ref-stat.hp>span,#gameScreen .er-ref-stat.mp>span,#gameScreen .er-ref-stat.ac>span{white-space:nowrap;font-size:calc(9 * var(--er33-u));letter-spacing:-.025em} /* V3.4.25 native 355x493 reference coordinates. Captured values never serve as player state. */ #gameScreen .er-stats-window,#gameScreen #detailPanel[data-classic-panel=stats]{width:calc(247 * var(--er33-u))!important;height:calc(493 * 247 / 355 * var(--er33-u))!important;background:#45454c!important} #gameScreen .er-stats-window>.er33-frame{display:none!important} #gameScreen .er3425-character{--er-info-u:calc(247 / 355 * var(--er33-u));height:calc(493 * var(--er-info-u))!important;background:#414147 url('/assets/classic-remaster/character-panel-v3425.svg') 0 0/100% 100% no-repeat!important;isolation:isolate} #gameScreen .er3425-character .er-ref-stat{left:calc(var(--x) * var(--er-info-u));top:calc(var(--y) * var(--er-info-u));width:calc(var(--w) * var(--er-info-u));height:calc(19 * var(--er-info-u))!important;gap:0!important;display:block!important} #gameScreen .er3425-character .er-ref-stat>span{position:absolute!important;width:1px!important;height:1px!important;clip-path:inset(50%);overflow:hidden} #gameScreen .er3425-character .er-ref-stat>b{display:block!important;width:100%!important;height:100%!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#33343a!important;color:#e8e6dd;text-align:center;font:bold calc(13 * var(--er-info-u))/1.35 'Trebuchet MS',Arial,sans-serif!important;text-shadow:1px 1px #17171b} #gameScreen .er3425-character .hp>b{color:#e9b5d4!important}#gameScreen .er3425-character .mp>b{color:#cdd7f2!important} #gameScreen .er3425-character .er-classic-char-header>b{display:grid!important;grid-template-columns:calc(44 * var(--er-info-u)) 1fr!important;background:#38383d!important} #gameScreen .er3425-character .alignment-label>b{background:#364e59!important;color:#b6d7ed!important} #gameScreen .er3425-character .er3425-native-lawful>b{visibility:hidden} #gameScreen .er3425-character .er-classic-slot{left:calc(var(--x) * var(--er-info-u));top:calc(var(--y) * var(--er-info-u));width:calc(50 * var(--er-info-u))!important;height:calc(52 * var(--er-info-u))!important;min-height:0!important;padding:calc(2 * var(--er-info-u))!important;border:0!important;box-shadow:none!important;background:#2c2e32!important;opacity:1!important} #gameScreen .er3425-character .er-classic-slot img{margin:0!important;width:100%!important;height:100%!important;object-fit:contain} #gameScreen .er3425-character .er-classic-slot:hover{outline:1px solid #a9a695} #gameScreen .er3425-character .er316-attr>button{position:absolute;left:100%;top:0;padding:0;width:calc(15 * var(--er-info-u));height:100%;line-height:1;color:#dfd0a2;background:#333} #gameScreen .er-stats-header>button{color:transparent;font-size:calc(10 * var(--er33-u));right:0;top:0;width:calc(30 * var(--er33-u));height:calc(18 * var(--er33-u));background:transparent} #gameScreen .er-stats-header>button:focus-visible{outline:1px solid #dbc7a0} /* Working left-edge spell level tabs, independent from the scrolling icon grid. */ .er18-window{padding-left:calc(27 * var(--er33-u))!important} .er3425-spell-pages{position:absolute;left:calc(5 * var(--er33-u));top:calc(17 * var(--er33-u));bottom:calc(20 * var(--er33-u));width:calc(18 * var(--er33-u));display:flex;flex-direction:column;gap:calc(1 * var(--er33-u));overflow-y:auto;scrollbar-width:none;z-index:12} .er3425-spell-pages button{flex:1 0 calc(20 * var(--er33-u));min-height:calc(19 * var(--er33-u));width:100%;padding:0;border:1px ridge #786b54;border-radius:45% 0 0 45%;background:linear-gradient(90deg,#2b2c2d,#4a3832);color:#a9a599;font:calc(9 * var(--er33-u))/1.1 Georgia,serif;cursor:pointer} .er3425-spell-pages button.active{color:#d7e4ce;background:linear-gradient(90deg,#2c453b,#405544);border-color:#918467} .er18-content .er18-grid{scrollbar-width:none} #gameScreen .er3425-character .er-classic-slot{border:calc(2 * var(--er-info-u)) solid transparent!important;background-clip:padding-box!important;padding:0!important} #gameScreen .er3425-character .er316-attr>button{left:auto;right:0;width:calc(12 * var(--er-info-u));font-size:calc(11 * var(--er-info-u))} #gameScreen .er-stats-window,#gameScreen #detailPanel[data-classic-panel=stats]{width:calc(373 * 247 / 355 * var(--er33-u))!important;background:transparent!important} #gameScreen .er3425-character{background-color:transparent!important} #gameScreen .er3425-character .er-classic-slot{left:calc(var(--x) * var(--er-info-u))!important;top:calc(var(--y) * var(--er-info-u))!important;transform:none!important} .er3425-spell-pages button{font-family:Georgia,'ClassicTC','PMingLiU','Microsoft JhengHei',serif!important} /* V3.4.30: source-framed inventory and single-column scroll conversation. */ #gameScreen #detailPanel[data-classic-panel=inventory]{width:calc(240 * var(--er33-u))!important;height:calc(367.2 * var(--er33-u))!important;padding:0!important;background:#333739 url('/assets/classic-remaster/inventory-frame-v3430.svg?v=3432') center/100% 100% no-repeat!important;isolation:isolate} #gameScreen #detailPanel[data-classic-panel=inventory]>.er33-frame,#gameScreen #detailPanel[data-classic-panel=inventory]>.er-native-inset{display:none!important} #gameScreen #detailPanel[data-classic-panel=inventory] #detailBody{position:absolute!important;inset:calc(21.6 * var(--er33-u)) calc(28.8 * var(--er33-u)) calc(22.4 * var(--er33-u)) calc(43.2 * var(--er33-u))!important;height:auto!important;overflow:hidden!important;display:block!important} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid{width:100%!important;height:100%!important;max-height:none!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:calc(40.4 * var(--er33-u))!important;flex:none!important;background:#0d1214!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y;scrollbar-width:none!important;overscroll-behavior:contain} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid .bag-tile{height:calc(40.4 * var(--er33-u))!important;border:1px solid #4c4a3c!important;border-radius:0!important;background:radial-gradient(ellipse,#161d1c,#090e10)!important;box-sizing:border-box} #gameScreen #detailPanel[data-classic-panel=inventory] .item-pixel-image{width:calc(36 * var(--er33-u))!important;height:calc(36 * var(--er33-u))!important} #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title{position:absolute!important;left:calc(5 * var(--er33-u))!important;top:calc(4 * var(--er33-u))!important;right:auto!important;width:calc(33 * var(--er33-u))!important;z-index:8} #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title #detailTitle{display:none!important} #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title button{position:static!important;font:bold calc(9 * var(--er33-u)) Georgia,serif!important;background:transparent!important;border:0!important;padding:0!important;color:#e2e1d8!important} .er3430-controls{position:absolute;inset:0;pointer-events:none;z-index:6} .er3430-controls button{pointer-events:auto;position:absolute;bottom:calc(2 * var(--er33-u));width:calc(20 * var(--er33-u));height:calc(20 * var(--er33-u));border:0;padding:0;background-color:transparent;border-radius:0;cursor:pointer} .er3430-controls [data-bag-action=pass]{left:calc(52 * var(--er33-u))}.er3430-controls [data-bag-action=delivery]{left:calc(79 * var(--er33-u))}.er3430-controls [data-bag-action=probability]{left:calc(106 * var(--er33-u))}.er3430-controls [data-bag-action=seal]{left:calc(128 * var(--er33-u))}.er3430-controls [data-bag-action=destroy]{right:calc(1 * var(--er33-u))} .er3430-controls button:hover,.er3430-controls button[aria-pressed=true]{filter:brightness(1.5);outline:1px solid #b6ac80} #gameScreen #detailPanel .er3430-scroll{position:absolute!important;right:calc(1.6 * var(--er33-u))!important;top:calc(24 * var(--er33-u))!important;bottom:calc(23.2 * var(--er33-u))!important;width:calc(18.4 * var(--er33-u))!important;display:flex!important;flex-direction:column;z-index:5;background:#44453b} #gameScreen #detailPanel .er3430-scroll .er3420-craft-track{position:relative!important;flex:1!important;min-height:0!important;background:linear-gradient(90deg,#8c8267,#d1c8a9 45%,#665c43 60%,#b6ae86)} #gameScreen #detailPanel .er3430-scroll .er3420-craft-thumb{position:absolute!important;left:0!important;width:100%!important;background-size:1428.57% 956.25%!important;background-position:98.92% 15.09%!important;border:0!important;padding:0!important;min-height:0!important;touch-action:none} #gameScreen #detailPanel .er3430-scroll .er3420-craft-up,#gameScreen #detailPanel .er3430-scroll .er3420-craft-down{position:static!important;width:100%!important;height:calc(19.2 * var(--er33-u))!important;flex:0 0 calc(19.2 * var(--er33-u));border:0!important;padding:0!important;min-height:0!important;background-size:1250% 1912.5%!important;background-position:99.28% 6.9%!important} #gameScreen #detailPanel .er3430-scroll .er3420-craft-down{background-position:99.28% 93.33%!important} .er3430-lock-mark{position:absolute;right:1px;top:1px;width:calc(11 * var(--er33-u));height:calc(12 * var(--er33-u));background:url('/assets/classic-remaster/inventory-reference-v3430.png') 58.03% 99.77% /1153.85% 1836%;z-index:4} body.er3430-select-item #detailPanel .bag-tile{cursor:crosshair!important} .er3430-item-dialog{width:min(340px,85vw)!important;max-height:75dvh;overflow:auto;white-space:normal;z-index:1000!important;font-family:'PMingLiU',serif}.er3430-item-dialog p{white-space:pre-line}.er3430-item-dialog input{width:100px}.er3430-item-dialog button{cursor:pointer} .er3411-dialog.er3430-teleports{width:calc(236 * var(--er33-u))!important;height:calc(335 * var(--er33-u))!important} .er3430-teleports .er3412-teleport-columns{position:absolute!important;inset:calc(30 * var(--er33-u)) calc(25 * var(--er33-u)) calc(22 * var(--er33-u)) calc(15 * var(--er33-u))!important;display:block!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:none;background:#101c1d!important;padding:calc(6 * var(--er33-u))!important;border:0!important} .er3430-teleports .er3412-teleport-group{display:block!important;border:0!important;background:transparent!important;padding:0!important;margin:0 0 calc(12 * var(--er33-u))!important} .er3430-teleports .er3412-teleport-group h3{font:inherit!important;color:#dddcc7!important;margin:0 0 calc(3 * var(--er33-u))!important} .er3430-teleports .er3412-teleport-group button{display:block!important;width:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:#c0c0a2!important;font:calc(10 * var(--er33-u))/1.3 'PMingLiU',serif!important;text-align:left!important;padding:0!important;min-height:0!important;white-space:normal!important} .er3430-teleports .er3412-teleport-group button:hover{color:#68c66b!important} #gameScreen #detailPanel[data-classic-panel=inventory]>.er-close-x{left:calc(4 * var(--er33-u))!important;right:auto!important;top:calc(4 * var(--er33-u))!important;width:calc(31 * var(--er33-u))!important;height:calc(13 * var(--er33-u))!important;color:transparent!important;background:transparent!important;border:0!important;text-shadow:none!important;opacity:0;z-index:12!important} #gameScreen #detailPanel:not([data-classic-panel=inventory])>.er3430-controls{display:none!important} #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title{left:calc(36 * var(--er33-u))!important;right:calc(23 * var(--er33-u))!important;width:auto!important;height:calc(18 * var(--er33-u))!important;cursor:move;touch-action:none} .er3411-dialog.er3430-teleports .er3412-teleport-columns{columns:auto!important;column-count:1!important;column-width:auto!important} .er3411-dialog.er3430-teleports .er3412-teleport-columns{column-count:auto!important;column-width:auto!important;columns:auto!important} .er3411-dialog.er3430-teleports .er3412-teleport-group{break-inside:auto!important} .er3411-dialog.er3430-teleports .er3412-teleport-group button{font-family:'ClassicTC','PMingLiU',serif!important} .er3430-item-dialog{font-family:'ClassicTC','PMingLiU',serif!important} /* V3.4.32: reference scenery is outside the actual bag frame. */ #gameScreen #detailPanel[data-classic-panel=inventory]{background-color:transparent!important} .er3432-appearance-button{position:absolute;right:30px;top:8px;z-index:14;cursor:pointer} .er3432-appearance-list{max-height:60vh;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .er3432-appearance-list button{display:flex;align-items:center;gap:8px;text-align:left;min-height:70px}.er3432-appearance-list img{width:50px;height:64px;object-fit:contain}.er3432-appearance-list button[aria-pressed=true]{outline:1px solid #bdb58e} /* V3.4.33: native panel proportions use the 800x600 client, not desktop pixels. */ #gameScreen #detailPanel[data-classic-panel=inventory]{--er33-u:calc(var(--er3419-vw) * .125);background-image:url('/assets/classic-remaster/inventory-frame-v3433.svg?v=3433')!important;box-shadow:none!important;border:0!important;border-radius:0!important} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid{background:#0c1010!important;gap:0!important} #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid .bag-tile{border:0!important;box-shadow:inset -1px -1px #4b493c!important;background:transparent!important} #gameScreen #detailPanel .er3430-scroll{background:transparent!important} #gameScreen #detailPanel .er3430-scroll .er3420-craft-track{background:linear-gradient(90deg,transparent 0 28%,#635a42 30%,#e1c992 43%,#857957 48%,#342d20 55%,#b7a77b 64%,transparent 75%)!important} #gameScreen #detailPanel .er3430-scroll .er3420-craft-thumb{background-image:url('/assets/classic-remaster/npc-craft-reference-v3420.png')!important;background-size:1255.17% 800%!important;background-position:98.209% 13.594%!important;background-repeat:no-repeat!important} .er3433-appearance.er3411-dialog{pointer-events:auto;--er33-u:calc(var(--er3419-vw) * .125);position:fixed!important;width:calc(240 * var(--er33-u))!important;height:calc(320 * var(--er33-u))!important;max-height:none!important;max-width:none!important;overflow:hidden!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;color:#d1d0c6;font:calc(10 * var(--er33-u))/1.3 'ClassicTC','PMingLiU',serif} .er3433-appearance>.er33-frame{z-index:0!important;background:#303138 url('/assets/classic-remaster/hud-stone-v3437.png')!important} .er3433-appearance>h2{position:absolute!important;left:calc(17 * var(--er33-u));top:calc(22 * var(--er33-u));right:calc(92 * var(--er33-u));font:inherit!important;margin:0!important;z-index:2;cursor:move;touch-action:none} .er3433-appearance>.er3411-close{position:absolute!important;right:calc(5 * var(--er33-u))!important;top:calc(2 * var(--er33-u))!important;border:0!important;padding:0!important;background:none!important;color:#e2dfd3!important;font:bold calc(8 * var(--er33-u)) Georgia,serif!important;z-index:3} .er3433-appearance .er3433-release{position:absolute;right:calc(30 * var(--er33-u));top:calc(22 * var(--er33-u));color:#c8cb99;z-index:3} .er3433-appearance button{border:0;border-radius:0;background:none;box-shadow:none;font:inherit;padding:0;text-shadow:1px 1px #111;cursor:pointer} .er3433-tree{position:absolute;left:calc(17 * var(--er33-u));right:calc(28 * var(--er33-u));top:calc(43 * var(--er33-u));bottom:calc(19 * var(--er33-u));overflow:auto;scrollbar-width:none;background:#14171d;border:1px inset #66696b;padding:calc(3 * var(--er33-u)) 0;overscroll-behavior:contain;touch-action:pan-y} .er3433-tree::-webkit-scrollbar{display:none} .er3433-group>button{display:flex;align-items:center;gap:calc(4 * var(--er33-u));width:100%;color:#c4c887;text-align:left;min-height:calc(14 * var(--er33-u));padding-left:calc(2 * var(--er33-u))} .er3433-toggle{display:inline-flex;align-items:center;justify-content:center;width:calc(8 * var(--er33-u));height:calc(8 * var(--er33-u));border:1px solid #6e7681;background:#202c36;font-size:calc(7 * var(--er33-u));color:#bac9d0} .er3433-rows{padding-left:calc(13 * var(--er33-u))} .er3433-rows>button{display:block;width:100%;min-height:calc(14 * var(--er33-u));color:#c9c9c5;text-align:left;border-bottom:1px solid #252930;line-height:1.2} .er3433-rows>button:hover,.er3433-rows>button[aria-pressed=true]{color:#eeecca;background:#303238} .er3433-rows>button:disabled{color:#777b7e;opacity:1;cursor:not-allowed} .er3433-appearance .er3420-craft-rail{top:calc(26 * var(--er33-u));bottom:calc(25 * var(--er33-u));right:calc(5 * var(--er33-u));width:calc(14 * var(--er33-u))} .er3433-appearance .er3420-craft-rail button{background-repeat:no-repeat!important;min-height:0} .er3433-appearance .er3420-craft-thumb{position:absolute;left:0;width:100%;touch-action:none} .er3411-dialog.er3433-appearance button{border:0!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;border-radius:0!important;margin:0!important;font:inherit!important;padding:0!important;color:inherit} .er3411-dialog.er3433-appearance>.er33-frame{background:#303138 url('/assets/classic-remaster/native-leather-v3433.svg')!important} .er3411-dialog.er3433-appearance .er3433-tree{background:linear-gradient(#060b1260,#060b1260),url('/assets/classic-remaster/native-leather-v3433.svg')!important} .er3411-dialog.er3433-appearance .er3433-group>button{color:#c4c887!important;padding-left:calc(2 * var(--er33-u))!important} .er3411-dialog.er3433-appearance .er3433-rows>button{border-bottom:1px solid #292d34!important;color:#c9c9c5!important;text-align:left!important} .er3411-dialog.er3433-appearance .er3433-rows>button:hover,.er3411-dialog.er3433-appearance .er3433-rows>button[aria-pressed=true]{background:#252b3380!important;color:#e3dfb7!important} .er3411-dialog.er3433-appearance .er3433-rows>button:disabled{color:#777b7e!important} .er3411-dialog.er3433-appearance .er3433-release{color:#c8cb99!important} .er3411-dialog.er3433-appearance .er3411-close{font:bold calc(8 * var(--er33-u)) Georgia,serif!important;color:#e2dfd3!important} .er3411-dialog.er3433-appearance .er3420-craft-rail button{background-image:url('/assets/classic-remaster/npc-craft-reference-v3420.png')!important} /* Native windows cover the field status strip while open. */ #gameScreen>#er-active-effects{z-index:9990} /* V3.4.36: one continuous native frame, transparent interactive hit areas. */ #gameScreen #detailPanel[data-classic-panel=inventory]{background-image:url('/assets/classic-remaster/inventory-frame-v3436.svg')!important;background-color:transparent!important} .er3430-controls button{background:none!important;box-shadow:none!important;filter:none!important;outline:none!important} .er3430-controls button:focus-visible{outline:1px solid #d4c99e!important} .er3430-controls button:hover,.er3430-controls button[aria-pressed=true]{background:#c0bda218!important} body[data-inventory-mode=probability] #gameScreen #detailPanel,body[data-inventory-mode=probability] #gameScreen #detailPanel *{cursor:url('/assets/cursors/inventory-query-v3436.svg') 11 11,zoom-in!important} body[data-inventory-mode=seal] #gameScreen #detailPanel,body[data-inventory-mode=seal] #gameScreen #detailPanel *{cursor:url('/assets/cursors/inventory-lock-v3436.svg') 16 16,pointer!important} .er3411-dialog.er3436-probability{width:calc(300 * var(--er33-u));padding:calc(25 * var(--er33-u)) calc(20 * var(--er33-u))!important;background:#32343b!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#deddd4;font:calc(11 * var(--er33-u))/1.4 'ClassicTC','PMingLiU',serif!important} .er3436-probability>h2{font:inherit!important;margin:0 0 calc(12 * var(--er33-u))!important;cursor:move;touch-action:none;color:#e4e2d8!important} .er3436-probability-body{position:relative;z-index:2}.er3436-probability-body p{margin:0 0 calc(8 * var(--er33-u))}.er3436-probability-body table{width:100%;border-collapse:collapse}.er3436-probability-body th,.er3436-probability-body td{padding:calc(5 * var(--er33-u));border-bottom:1px solid #626260;text-align:left}.er3436-probability-body td:last-child{text-align:right;color:#d1d0a3} .er3436-probability>.er3411-close{font:bold italic calc(9 * var(--er33-u)) Georgia,serif!important;top:0!important;right:calc(4 * var(--er33-u))!important;border:0!important;background:none!important;color:#e4e2d8!important;box-shadow:none!important} .er3411-overlay .er3436-probability{pointer-events:auto!important} /* Reference: vertical enhancement probability panel; no captured annotations or values. */ .er3411-dialog.er3436-probability{--er36-prob-u:calc(.8 * var(--er33-u));width:calc(320 * var(--er36-prob-u))!important;height:calc(448 * var(--er36-prob-u))!important;padding:0!important;background:transparent url('/assets/classic-remaster/probability-frame-v3436.svg') center/100% 100% no-repeat!important;overflow:hidden!important} .er3436-probability>h2{position:absolute;left:0;top:0;width:85%;height:calc(25 * var(--er36-prob-u));margin:0!important;color:transparent!important;z-index:5} .er3436-probability-body{position:absolute;left:calc(20 * var(--er36-prob-u));right:calc(36 * var(--er36-prob-u));top:calc(28 * var(--er36-prob-u));bottom:calc(45 * var(--er36-prob-u));overflow-y:auto;scrollbar-width:none;font:calc(12 * var(--er36-prob-u))/1.45 'ClassicTC','PMingLiU',serif;color:#aaa9a6} .er3436-probability-body p{margin:0!important;white-space:normal} .er3436-probability-body .er3436-probability-item{color:#e3e2dc;margin-bottom:calc(15 * var(--er36-prob-u))!important} .er3436-probability-body .er3436-probability-scroll{color:#c5c4bd;margin-bottom:calc(5 * var(--er36-prob-u))!important} .er3436-probability-body .er3436-probability-warning{margin-top:calc(20 * var(--er36-prob-u))!important;color:#b97c7c} .er3436-probability-note{position:absolute;left:calc(20 * var(--er36-prob-u));bottom:calc(20 * var(--er36-prob-u));margin:0!important;color:#777975;font:calc(11 * var(--er36-prob-u)) 'ClassicTC','PMingLiU',serif} .er3411-overlay .er3411-dialog.er3436-probability{background-color:#171a1e!important;background-image:url('/assets/classic-remaster/probability-frame-v3436.svg')!important;background-size:100% 100%!important} /* V3.4.37: keep the inventory scrollbar within the source frame. Reference coordinates use its native 300 x 459 canvas; button crops contain only each 18 x 18 ornament, never the neighbouring frame. */ #gameScreen #detailPanel[data-classic-panel=inventory] .er3430-scroll{right:calc(6.4 * var(--er33-u))!important;top:calc(24.8 * var(--er33-u))!important;bottom:calc(28.8 * var(--er33-u))!important;width:calc(14.4 * var(--er33-u))!important;background:transparent!important} #gameScreen #detailPanel[data-classic-panel=inventory] .er3430-scroll .er3420-craft-track{background:transparent url('/assets/classic-remaster/inventory-reference-v3430.png') 97.87234% 77.22008% /1666.6667% 229.5% no-repeat!important} #gameScreen #detailPanel[data-classic-panel=inventory] .er3430-scroll .er3420-craft-up,#gameScreen #detailPanel[data-classic-panel=inventory] .er3430-scroll .er3420-craft-down{height:calc(14.4 * var(--er33-u))!important;flex:0 0 calc(14.4 * var(--er33-u))!important;background-size:1666.6667% 2550%!important;background-position:97.87234% 7.02948%!important;background-repeat:no-repeat!important;background-color:transparent!important;border-radius:50%!important;box-shadow:none!important} #gameScreen #detailPanel[data-classic-panel=inventory] .er3430-scroll .er3420-craft-down{background-position:97.87234% 91.83673%!important} #gameScreen #detailPanel[data-classic-panel=inventory] .er3430-scroll .er3420-craft-thumb{left:calc(2.4 * var(--er33-u))!important;width:calc(9.6 * var(--er33-u))!important;background-size:2500% 1275%!important;background-position:96.875% 11.58392%!important;background-repeat:no-repeat!important;background-color:transparent!important;box-shadow:none!important} /* Close always faces the interior of the game viewport at the default placement. */ #gameScreen [data-close-edge=left]>.er-close-x, #gameScreen [data-close-edge=left]>header>button.er3421-close, #gameScreen [data-close-edge=left]>header>button.er33-close, .er18-window .er18-head .er18-close{left:calc(4 * var(--er33-u))!important;right:auto!important} #gameScreen [data-close-edge=right]>header>.er3421-close, #gameScreen [data-close-edge=right]>header>.er33-close{left:auto!important;right:calc(4 * var(--er33-u))!important} #gameScreen .zone-panel>.er-close-x,.er3411-dialog.er3420-craft>.er3411-close,.er3411-dialog.er3433-appearance>.er3411-close{left:calc(4 * var(--er33-u))!important;right:auto!important} /* V3.4.44: services are menu entries, no NPC sprites cover the scene. */ .er44-npc-menu-button{position:absolute;right:18px;top:18px;z-index:25;background:#252725e8;color:#e3d6b5;border:1px solid #9a855b;padding:8px 18px;cursor:pointer} html.er-mobile .er44-npc-menu-button{display:none} .er44-npc-menu{width:340px;max-width:90%;max-height:65%;display:flex;flex-direction:column;background:#222623;color:#e3d6b5;z-index:10001} .er44-npc-list{display:flex;flex-direction:column;gap:5px;overflow:auto;padding:12px} .er44-npc-list button{color:inherit;background:#303330;border:1px solid #817455;padding:9px;text-align:left;cursor:pointer} /* Matching horizontal recovery selectors on both sides. */ .er-ats-recovery>div{min-width:0}.er-ats-recovery strong{display:block;margin:0 0 4px}.er-ats-recovery select{display:block;box-sizing:border-box;width:100%;margin:2px 0;padding:8px 6px;min-height:40px}.er-ats-potions>div{margin-bottom:4px}.er-ats-potions>label{display:block;margin-top:4px} .er-ats-window .er-ats-function-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px} /* Keep the battlefield sound control behind ATS settings and its dialogs. */ #gameScreen:has(.er-ats-window) #er-combat-sound{visibility:hidden!important;pointer-events:none!important} #gameScreen .er-ats-window>footer .er-ats-reset{min-width:108px;min-height:44px;padding:8px 14px;font-size:16px;line-height:1.3;white-space:nowrap;touch-action:manipulation} #gameScreen .er-ats-window>footer small{font-size:calc(.8em + 5px);line-height:1.4}#gameScreen .er-ats-window>footer{flex-wrap:wrap;gap:6px} #gameScreen .er-ats-window select.er-ats-conversion-select{display:block;width:50%;max-width:50%;box-sizing:border-box} #gameScreen .er-ats-window select.er-ats-conversion-select{font-size:1em!important} #gameScreen .er-ats-buff-spells>legend{box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between}#gameScreen .er-ats-window .er-ats-auto-form{box-sizing:border-box;width:50%;min-height:36px;padding:6px 8px;font-size:14px;float:none;white-space:normal} /* classic-entry-polymorph.css */ /* 3.4.11: live DOM selection; original sprites retain their own alpha channel. */ #selectScreen{background:#000;padding:0;overflow:auto;align-items:center;justify-content:center;} #selectScreen .select-wrap{position:relative;width:min(calc(var(--er3419-vw, 1vw) * 100),calc(100dvh * 4 / 3));height:min(100dvh,calc(var(--er3419-vw, 1vw) * 75));max-width:none;aspect-ratio:4/3;background:#000;color:#b69b65;text-align:left;font-family:Georgia,'Times New Roman',serif;container-type:size;} #selectScreen .select-wrap>h1,#selectScreen .select-wrap>.subtitle,#selectScreen #accountLogout{display:none;} #selectScreen #slots{position:absolute;inset:0 0 40%;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;} #selectScreen .character-slot-wrap{position:relative;margin:0;min-width:0;height:100%;} #selectScreen .slot{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border:0;background:none;box-shadow:none;padding:0 0 4%;border-radius:0;} #selectScreen .slot-icon{display:block;width:100%;height:90%;min-width:0;border:0;background:none;overflow:visible;} #selectScreen .slot-art{width:100%;height:100%;object-fit:contain;filter:brightness(.6);image-rendering:auto;} #selectScreen .slot.selected .slot-art{filter:brightness(1.08) drop-shadow(0 0 12px #45311e);} #selectScreen .slot-info{display:block;text-align:center;font-size:clamp(11px,2cqw,20px);color:#c7b184;} #selectScreen .empty-slot-sword{font-size:clamp(36px,12cqw,120px);color:#706857;line-height:1;opacity:.65;} #classicSelectionDetails{position:absolute;inset:60% 28% 0 3%;display:grid;grid-template-columns:1.2fr 1fr;grid-auto-flow:row;gap:0 8%;align-content:start;padding:2% 4%;border-top:1px solid #4d402a;background:radial-gradient(ellipse at 50% 100%,#2c261d,#0c0b09 65%,#000);font-size:clamp(9px,1.7cqw,17px);} #classicSelectionDetails h2{grid-column:1/-1;margin:0 0 2%;font-weight:400;color:#d3bf91;font-size:1.3em;} #classicSelectionDetails>div{display:flex;justify-content:space-between;gap:8px;line-height:1.6;} #classicSelectionDetails b{font-weight:400;color:#d9c596;} #classicSelectionControls{position:absolute;inset:63% 2% 4% 76%;display:flex;flex-direction:column;justify-content:center;gap:9%;} #classicSelectionControls button{font-family:Georgia,serif;font-size:clamp(14px,2.8cqw,28px);color:#c7a96b;background:none;border:0;box-shadow:none;text-shadow:1px 2px #302517;} #classicSelectionControls button:hover{color:#ffe5aa;}#classicSelectionControls button:disabled{color:#544b3b;} #selectScreen #createPanel:not([hidden]){position:absolute;inset:0;z-index:5;margin:0;overflow:auto;max-height:100%;background:#141411;} .er3411-polymorphed{background:none!important;overflow:visible!important;} #playerSprite.er3411-polymorphed>.er3411-form-image{position:absolute;left:50%;bottom:0;max-width:230px;max-height:240px;min-width:100px;transform:translateX(-50%) scale(1.65);transform-origin:50% 100%;object-fit:contain;image-rendering:pixelated;pointer-events:none;} #playerSprite.er3411-polymorphed:is(.attacking,.shooting,.casting){animation:none!important;transform:none!important;} .er3411-overlay{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;background:#0007;padding:12px;} .er3411-dialog{position:relative;box-sizing:border-box;width:min(710px,calc(var(--er3419-vw, 1vw) * 96));max-height:90dvh;overflow:auto;padding:20px;background:linear-gradient(135deg,#292820,#100f0c);border:2px ridge #8c7850;color:#d8c291;box-shadow:0 6px 30px #000;} .er3411-dialog h2{margin:0 70px 15px 0;font-size:20px;}.er3411-close{position:absolute;right:8px;top:8px;} .er3411-dialog button{color:#d8c291;background:#181711;border:1px solid #65583c;}.er3411-dialog input{background:#0d0d0b;color:#e4d1a8;padding:8px;border:1px solid #75613f;box-sizing:border-box;width:100%;} .er3411-poly-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px;margin-top:12px;} .er3411-poly-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:125px;padding:5px;}.er3411-poly-card img{width:85px;height:85px;object-fit:contain;image-rendering:pixelated;}.er3411-poly-card b{font-size:13px;}.er3411-poly-card:disabled{opacity:.35;}.er3411-poly-card:not(:disabled):hover{outline:1px solid #dab55e;} .er3411-storage-list{display:flex;flex-direction:column;gap:5px;max-height:55dvh;overflow:auto;}.er3411-storage-list button{text-align:left;padding:8px;}.er3411-dialog nav{display:flex;gap:12px;margin-bottom:10px;}.er3411-storage-message{color:#ea9a73;}.er3411-pending{font-size:12px;color:#b4a999;} .er33-merchant .er3411-npc-name{background:#12120c9c;color:#e3d5ad;padding:3px 6px;border:1px solid #a48c5655;white-space:nowrap;font-size:12px;text-shadow:1px 1px #000;} /* Sample only the original carved exit panel; all buttons are live controls. */ .er3411-exit{position:fixed;z-index:1400;right:0;top:0;width:min(250px,calc(var(--er3419-vw, 1vw) * 70));aspect-ratio:250/410;background-image:url('/assets/classic-remaster/exit-reference-v3411.jpg');background-size:361.6% 165.366%;background-position:100% 0;background-repeat:no-repeat;} .er3411-exit button{position:absolute;left:20%;width:65%;height:8%;padding:0;border:0;background:none!important;box-shadow:none!important;color:#c5bd8e;font:19px Georgia,serif;text-shadow:1px 1px 2px #000;} .er3411-exit-close{top:0;left:0!important;width:35%!important;font-size:13px!important;}.er3411-exit-restart{top:19%;}.er3411-exit-quit{top:28.5%;}.er3411-exit-cancel{top:38%;} .er3411-exit button:hover{color:#ffe6ab;} .er3411-exit{width:min(269px,calc(var(--er3419-vw, 1vw) * 70));aspect-ratio:269/410;background-size:336.06% 165.366%;clip-path:polygon(0 0,100% 0,100% 100%,7% 100%,7% 7%,0 7%);} .er3411-exit button{color:transparent!important;text-shadow:none!important;} .er3411-exit button:hover,.er3411-exit button:focus-visible{outline:1px solid #e6c77b;outline-offset:-2px;} #playerSprite.er3411-polymorphed>.er3411-form-image{width:revert-layer;height:revert-layer;min-width:0;max-width:none;max-height:none;transform:translateX(-50%);} .er33-merchant .er3411-npc-image{display:block;width:64px;height:96px;object-fit:contain;image-rendering:pixelated;pointer-events:none;} #selectScreen .select-wrap{font-family:Georgia,'ClassicTC',serif;} #selectScreen .empty-slot-sword{display:block;width:75%;height:auto;aspect-ratio:200/214;margin-bottom:8%;background:url('/assets/classic-remaster/selection-reference-v3411.png') 82.63% 38.78% / 491.5% 345.794% no-repeat;opacity:1;} #selectScreen .slot-art{height:85%;max-height:none;position:relative;top:10%;} #classicSelectionDetails{grid-template-columns:1fr 1fr;grid-template-rows:repeat(9,1fr);align-content:stretch;font-size:clamp(9px,1.5cqw,17px);} #classicSelectionDetails h2{grid-row:1;grid-column:1/-1;font-size:1em;display:flex;justify-content:space-between;} #classicSelectionDetails [data-field="Blood Pledge"]{grid-row:2;grid-column:1/-1;} #classicSelectionDetails [data-field="Class"]{grid-area:3/1;}#classicSelectionDetails [data-field="Alignment"]{grid-area:4/1;} #classicSelectionDetails [data-field="Hit Point"]{grid-area:6/1;}#classicSelectionDetails [data-field="Mana Point"]{grid-area:7/1;}#classicSelectionDetails [data-field="Armor Class"]{grid-area:9/1;} #classicSelectionDetails [data-field="Level"]{grid-area:3/2;}#classicSelectionDetails [data-field="STR"]{grid-area:4/2;}#classicSelectionDetails [data-field="DEX"]{grid-area:5/2;}#classicSelectionDetails [data-field="CON"]{grid-area:6/2;}#classicSelectionDetails [data-field="WIS"]{grid-area:7/2;}#classicSelectionDetails [data-field="CHA"]{grid-area:8/2;}#classicSelectionDetails [data-field="INT"]{grid-area:9/2;} .er3411-overlay{z-index:20000;font-family:'ClassicTC',serif;}.er3411-exit{z-index:20010;font-family:'ClassicTC',serif;} .er3411-exit{width:min(269px,calc(var(--er3419-vw, 1vw) * 70),calc(100dvh * 269 / 410));} #selectScreen .slot.selected .slot-art{filter:brightness(1.08);} .er3411-craft-row{padding:8px 0;border-bottom:1px solid #675638;}.er3411-craft-row button{padding:7px 12px;}.er3411-craft-row p{margin:5px 0;font-size:13px;} /* V3.4.12 NPC dock stays right of the player; all entries remain reachable. */ #gameScreen .er33-merchants{inset:8px 8% 12px 49%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:112px;align-content:start;gap:8px;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:thin;background:transparent;} #gameScreen .er33-merchant{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%;height:112px;justify-content:flex-end;align-self:end;} #gameScreen .er33-merchant .er3411-npc-image{height:82px;max-width:100%;} #gameScreen .er33-merchant .er3411-npc-name{max-width:100%;box-sizing:border-box;white-space:normal;} .er3412-teleports{width:min(780px,calc(var(--er3419-vw, 1vw) * 94))!important;max-height:88dvh;overflow:auto;background:#252525!important;color:#d8d7c4;border:2px solid #a8a5a0;border-radius:8px;} .er3412-teleport-columns{columns:3 170px;column-gap:12px;} .er3412-teleport-group{break-inside:avoid;margin:0 0 18px;border:1px solid #7776;padding:10px;} .er3412-teleport-group h3{font:15px 'PMingLiU',serif;margin:0 0 8px;color:#eee;} .er3412-teleport-group button{display:block;background:none;border:0;color:#d4d57b;text-align:left;padding:4px;cursor:pointer;font:14px 'PMingLiU',serif;width:100%;} .er3412-teleport-group button:hover{color:#fff;text-decoration:underline;} .er3412-teacher-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;} .er3412-teacher-list button{padding:9px;color:#e4d58a;background:#20201c;border:1px solid #716448;} @media(max-width:700px){#gameScreen .er33-merchants{right:7%;left:47%;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:92px;gap:5px;}#gameScreen .er33-merchant{height:92px;}#gameScreen .er33-merchant .er3411-npc-image{height:65px;}.er3412-teleport-columns{columns:2 125px;}} #gameScreen .er33-merchants:empty{display:none!important;} /* V3.4.13 classic HUD proportions: wide chat, compact side panels, nine direct icons. */ #gameScreen{--client-status-width:calc(var(--er3419-vw, 1vw) * 17.5);--client-shortcut-width:calc(var(--er3419-vw, 1vw) * 22.5);--er-hud-height:min(calc(var(--er3419-vw, 1vw) * 16.4),29dvh);--er-classic-hud-height:var(--er-hud-height)!important;--classic-hud-height:var(--er-hud-height)!important;} #gameScreen .arena:not([hidden]){bottom:var(--er-hud-height)!important;inset:0 0 var(--er-hud-height)!important;} #gameScreen .character-panel{width:var(--client-status-width)!important;height:var(--er-hud-height)!important;padding:0!important;border:0!important;border-radius:0!important;background:#262831!important;} #gameScreen .er19-stats{display:grid!important;grid-template-rows:1.1fr 1fr 1fr 1fr 1fr!important;gap:2px!important;} #gameScreen .er19-head,#gameScreen .er19-cell,#gameScreen .er19-wide{border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;overflow:hidden!important;background-color:#292c34!important;} #gameScreen .er19-duo{gap:2px!important;} #gameScreen .er19-cell i,#gameScreen .er19-wide i{display:none!important;} #gameScreen .er19-head::before{content:'';position:absolute;inset:25% 5% 20% 2%;background:#252a34;z-index:0;} #gameScreen .er19-head{padding:0 5px!important;} #gameScreen #er19-level,#gameScreen #er19-exp{position:relative;z-index:1;font-size:clamp(8px,calc(var(--er3419-vw, 1vw) * 1.03),16px)!important;background:#252a34!important;} #gameScreen .er33-exp-fill{display:none!important;} #gameScreen .er19-cell span{position:absolute!important;left:37%!important;right:8%!important;top:26%!important;bottom:24%!important;width:auto!important;height:auto!important;background:#292d38!important;font-size:clamp(8px,calc(var(--er3419-vw, 1vw) * 1.03),16px)!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;} #gameScreen .er19-cell.er19-amber span{background:#574c37!important;} #gameScreen .er19-law>span{display:flex!important;position:absolute!important;left:20%!important;top:26%!important;bottom:24%!important;width:47%!important;background:#373b43!important;font-size:clamp(8px,calc(var(--er3419-vw, 1vw) * 1.03),16px)!important;align-items:center!important;} #gameScreen .er19-law>b{position:absolute!important;left:68%!important;right:8%!important;top:26%!important;bottom:24%!important;width:auto!important;height:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;background:#373b43!important;font-size:clamp(8px,calc(var(--er3419-vw, 1vw) * 1.03),16px)!important;} #gameScreen #er19-landscape{position:absolute!important;left:22%!important;right:9%!important;top:27%!important;width:auto!important;font-size:clamp(7px,calc(var(--er3419-vw, 1vw) * .9),14px)!important;color:#f5eec9!important;text-shadow:1px 1px #000!important;background:transparent!important;} #gameScreen .classic-log-box.er20-chat{left:var(--client-status-width)!important;right:var(--client-shortcut-width)!important;height:var(--er-hud-height)!important;background:#37373f!important;border-left:1px solid #a7a38f!important;border-right:1px solid #a7a38f!important;padding:4px 18px 3px 5px!important;} #gameScreen .er33-chat-stone{opacity:.8!important;} #gameScreen .er20-chat .classic-log-text{font-size:clamp(9px,calc(var(--er3419-vw, 1vw) * 1.1),17px)!important;line-height:1.3!important;color:#ded8a5!important;padding:2px!important;} #gameScreen .er20-chat .classic-chat-row{height:clamp(14px,calc(var(--er3419-vw, 1vw) * 2.1),28px)!important;flex-basis:clamp(14px,calc(var(--er3419-vw, 1vw) * 2.1),28px)!important;background:#34353e!important;} #gameScreen .er20-chat .classic-chat-row input{font-size:clamp(9px,calc(var(--er3419-vw, 1vw) * 1),16px)!important;} #gameScreen .er33-dragon-frame{left:-1%!important;right:-1%!important;top:calc(calc(var(--er3419-vw, 1vw) * -3.7))!important;height:calc(var(--er3419-vw, 1vw) * 4.6)!important;max-height:68px!important;image-rendering:auto;} #gameScreen .er20-vitals{left:5%!important;right:5%!important;top:calc(calc(var(--er3419-vw, 1vw) * -1.35))!important;height:calc(var(--er3419-vw, 1vw) * 1.65)!important;grid-template-columns:1fr 14% 1fr!important;} #gameScreen .er20-meter{height:calc(var(--er3419-vw, 1vw) * 1.65)!important;border:0!important;box-shadow:none!important;} #gameScreen .er20-meter span{font-size:clamp(8px,calc(var(--er3419-vw, 1vw) * 1.05),16px)!important;} #gameScreen .bottom-nav{width:var(--client-shortcut-width)!important;height:var(--er-hud-height)!important;padding:0 2px calc(var(--client-shortcut-width) / 9)!important;background:#121316!important;border:2px ridge #b9aa89!important;} #gameScreen .bottom-nav .hud17-key{border:1px solid #8d8167!important;border-radius:0!important;background:linear-gradient(115deg,#111216,#22242a)!important;} #gameScreen .bottom-nav .hud17-key img{width:85%!important;height:85%!important;object-fit:contain!important;image-rendering:auto;} #gameScreen .bottom-nav .hud17-key:not(:has(.hud17-itemname))>small{font-size:clamp(12px,calc(var(--er3419-vw, 1vw) * 2.1),30px)!important;} #gameScreen .bottom-nav button.er-classic-menu{display:block!important;position:absolute!important;left:calc(var(--menu-index) * 100% / 9)!important;bottom:-1px!important;width:calc(100% / 9)!important;height:calc(var(--client-shortcut-width) / 9)!important;padding:0!important;border:1px solid #a38e63!important;border-radius:0!important;image-rendering:auto;} #gameScreen .bottom-nav .er-menu-more,#gameScreen .er-standard-overflow{display:none!important;} #gameScreen .bottom-nav .er-hotkey-pages{top:calc(calc(var(--er3419-vw, 1vw) * -1.4))!important;height:calc(var(--er3419-vw, 1vw) * 1.4)!important;left:0!important;} #gameScreen .er-hotkey-pages button{font-size:clamp(8px,calc(var(--er3419-vw, 1vw) * .9),14px)!important;width:calc(var(--er3419-vw, 1vw) * 2.8)!important;height:calc(var(--er3419-vw, 1vw) * 1.5)!important;border-radius:3px!important;} #gameScreen .er33-zone-label{bottom:calc(var(--er-hud-height) + 3px)!important;font-size:clamp(12px,calc(var(--er3419-vw, 1vw) * 1.8),24px)!important;} #gameScreen .arena .er33-zone-label{bottom:3px!important;} @media(orientation:portrait){#gameScreen{--client-status-width:calc(var(--er3419-vw, 1vw) * 25);--client-shortcut-width:calc(var(--er3419-vw, 1vw) * 31);--er-hud-height:calc(var(--er3419-vw, 1vw) * 20);}#gameScreen .er19-law>span{font-size:7px!important;}#gameScreen #er19-level,#gameScreen #er19-exp{font-size:7px!important;}#gameScreen .er20-chat .classic-log-text{font-size:9px!important;}#gameScreen .bottom-nav .er-hotkey-pages{top:-14px!important;height:14px!important;}#gameScreen .er-hotkey-pages button{height:14px!important;width:25px!important;}} #gameScreen .er33-dragon-frame{top:calc(var(--er3419-vw, 1vw) * -6.3)!important;height:calc(var(--er3419-vw, 1vw) * 7.7)!important;max-height:none!important;clip-path:polygon(0 100%,0 78%,2% 72%,3% 60%,6% 22%,9% 52%,12% 60%,43.5% 60%,44% 43%,45.5% 30%,47% 13%,48.3% 0,49% 24%,52% 28%,52.8% 0,54.8% 20%,57.7% 45%,58.5% 60%,88% 60%,91% 52%,94% 22%,97% 60%,98% 72%,100% 78%,100% 100%)!important;} #gameScreen .er20-vitals{z-index:7!important;left:6.5%!important;right:6.5%!important;top:calc(var(--er3419-vw, 1vw) * -2.1)!important;height:calc(var(--er3419-vw, 1vw) * 2.5)!important;} #gameScreen .er20-meter{height:calc(var(--er3419-vw, 1vw) * 2.5)!important;} #gameScreen .battlefield>.combatant:has(.er315-knight){filter:none!important;} #playerSprite.er315-knight>.er315-knight-img{filter:url(#er-knight-alpha-key)!important;} #gameScreen #er19-landscape{color:transparent!important;text-shadow:none!important;} #gameScreen .arena-top{left:3px!important;right:auto!important;bottom:4px!important;transform:none!important;width:auto!important;max-width:var(--client-status-width)!important;} #gameScreen #zoneTitle{position:static!important;display:block!important;transform:none!important;margin:0!important;padding:0!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(10px,calc(var(--er3419-vw, 1vw) * 1.2),18px)!important;} /* V3.4.14: the opaque reference frame must stay below every shop control. */ #gameScreen .er33-shop > .er33-frame{z-index:0!important;pointer-events:none!important} #gameScreen .er33-shop > :not(.er33-frame){position:relative;z-index:1} #gameScreen .er33-shop > .er33-shop-title{position:absolute;z-index:2} #gameScreen .er33-shop > .er33-shop-footer{position:absolute;z-index:2} #gameScreen .er33-shop-tabs{min-height:26px;gap:8px} #gameScreen .er33-shop-tabs button{min-height:26px;min-width:64px;font-size:14px} #gameScreen .er33-shop-tabs button.active{color:#fff1b8;border-color:#dfc783} .er-ats-diagnostics{position:relative;z-index:1;flex-shrink:0;min-height:1.4em;margin:2px 6px;font-size:12px;color:#eedcaf;max-height:3.5em;overflow:auto} #playerSprite .er3414-form-canvas{display:none;position:absolute;left:50%;transform:translateX(-50%);max-width:none!important;max-height:none!important;pointer-events:none;image-rendering:pixelated} #playerSprite.er3414-form-ready .er3411-form-image{display:none!important} #playerSprite.er3414-form-ready .er3414-form-canvas{display:block} #gameScreen .er33-merchant .er3414-npc-canvas{height:82px;max-width:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none} @media(max-width:700px){#gameScreen .er33-merchant .er3414-npc-canvas{height:65px}} /* NPC function above the head, name below; reserve room on narrow screens too. */ #gameScreen .er33-merchants{grid-auto-rows:140px} #gameScreen .er33-merchant{height:140px;gap:2px} #gameScreen .er33-merchant .er3416-npc-function{order:-1;flex-shrink:0;max-width:100%;box-sizing:border-box;padding:2px 4px;color:#ffdf83;font: bold 12px/18px 'PMingLiU',serif;text-align:center;white-space:normal;overflow-wrap:anywhere;text-shadow:1px 1px 2px #000,-1px -1px 2px #000;pointer-events:none} #gameScreen .er33-merchant .er3411-npc-name{order:1;flex-shrink:0} #gameScreen .er33-merchant .er3411-npc-image,#gameScreen .er33-merchant .er3414-npc-canvas{flex-shrink:0} @media(max-width:700px){#gameScreen .er33-merchants{grid-auto-rows:124px}#gameScreen .er33-merchant{height:124px}} #playerSprite.er3414-form-ready{background-image:none!important;animation:none!important;transform:none!important} /* V3.4.24: native selection composition; every value remains live DOM. */ #selectScreen .select-wrap::before{content:'';position:absolute;inset:59.5% 0 0;background:url('/assets/classic-remaster/selection-art-v3424.svg') center/100% 100% no-repeat;pointer-events:none} #selectScreen #slots{inset:0 5% 40% 10%} #selectScreen .slot-info{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap} #selectScreen .slot-icon{height:100%;position:relative} #selectScreen .slot-art{height:100%;top:0;object-fit:contain} #selectScreen .slot:not(.selected) .slot-art{clip-path:inset(0 0 15% 0);opacity:.75} #classicSelectionDetails{inset:60% 25% 3% 7%;padding:0;background:none;border:0;display:block;font-family:Georgia,'ClassicTC',serif;font-size:clamp(9px,1.7cqw,17px);color:#d4cba1;text-shadow:1px 1px 2px #000} #classicSelectionDetails h2,#classicSelectionDetails>div{position:absolute;margin:0;display:flex;justify-content:space-between;align-items:center;background:#000;line-height:1.25;height:7.5%;width:44%;gap:0;white-space:nowrap} #classicSelectionDetails h2{top:0;left:0;width:75%;font-size:1em} #classicSelectionDetails b{box-sizing:border-box;min-width:34%;padding:0 3px;text-align:left;background:#292a2b;border:1px inset #424242;color:#d3d7cd;font:inherit;height:100%;line-height:1.2} #classicSelectionDetails h2 b,#classicSelectionDetails [data-field='Blood Pledge'] b{width:66%} #classicSelectionDetails [data-field='Blood Pledge']{top:9%;left:0;width:75%} #classicSelectionDetails [data-field='Class']{top:25%;left:3%}#classicSelectionDetails [data-field='Alignment']{top:35%;left:3%} #classicSelectionDetails [data-field='Hit Point']{top:64%;left:3%}#classicSelectionDetails [data-field='Mana Point']{top:74%;left:3%}#classicSelectionDetails [data-field='Armor Class']{top:91%;left:3%} #classicSelectionDetails [data-field='Level']{top:25%;left:57%}#classicSelectionDetails [data-field='STR']{top:41%;left:57%}#classicSelectionDetails [data-field='DEX']{top:51%;left:57%}#classicSelectionDetails [data-field='CON']{top:61%;left:57%}#classicSelectionDetails [data-field='WIS']{top:71%;left:57%}#classicSelectionDetails [data-field='CHA']{top:81%;left:57%}#classicSelectionDetails [data-field='INT']{top:91%;left:57%} #classicSelectionControls{inset:82% 3% 3% 84%;gap:0;justify-content:space-between} #classicSelectionControls button{font-size:clamp(12px,2cqw,22px);padding:0;line-height:1.25} .er-ats-window>header{touch-action:none;cursor:move;user-select:none} /* Position real values over the native reference's empty field locations. */ #selectScreen .slot:not(.selected) .slot-art{clip-path:none;opacity:1} #classicSelectionDetails{inset:0;pointer-events:none} #classicSelectionDetails h2,#classicSelectionDetails>div{background:transparent;height:3.1%;width:12.1%;left:26.1%;margin:0;padding:0;display:block} #classicSelectionDetails>div>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #classicSelectionDetails b{display:block;width:100%;min-width:0;height:100%;font-size:clamp(9px,1.6cqw,17px);padding:0 4px;line-height:1.2;background:#272727;border:1px inset #424242} #classicSelectionDetails h2{left:7.2%;top:60.9%;width:49%;height:3.3%;display:flex;align-items:center;justify-content:space-between;font-size:clamp(10px,2cqw,20px)} #classicSelectionDetails h2 b{width:61%;font-size:clamp(9px,1.6cqw,17px)} #classicSelectionDetails [data-field='Blood Pledge']{left:26.3%;top:64.8%;width:30.1%} #classicSelectionDetails [data-field='Blood Pledge'] b{width:100%} #classicSelectionDetails [data-field='Class']{top:70.5%;left:26.1%}#classicSelectionDetails [data-field='Alignment']{top:74.3%;left:26.1%} #classicSelectionDetails [data-field='Hit Point']{top:84.5%;left:26.1%}#classicSelectionDetails [data-field='Mana Point']{top:88.2%;left:26.1%}#classicSelectionDetails [data-field='Armor Class']{top:93.9%;left:26.1%} #classicSelectionDetails [data-field='Level']{top:70.5%;left:61.9%}#classicSelectionDetails [data-field='STR']{top:76.1%;left:61.9%}#classicSelectionDetails [data-field='DEX']{top:79.9%;left:61.9%}#classicSelectionDetails [data-field='CON']{top:83.7%;left:61.9%}#classicSelectionDetails [data-field='WIS']{top:87.4%;left:61.9%}#classicSelectionDetails [data-field='CHA']{top:91.2%;left:61.9%}#classicSelectionDetails [data-field='INT']{top:95%;left:61.9%} #classicSelectionControls{inset:83% 7% 3.5% 83.5%;gap:0} #classicSelectionControls button{color:transparent;text-shadow:none} #classicSelectionControls button:hover,#classicSelectionControls button:focus-visible{outline:1px solid #d4c79c} #classicSelectionControls button:disabled{opacity:.4} #selectScreen .slot-icon{height:82%} #selectScreen .slot{padding-bottom:8%} #classicSelectionControls button:disabled{background:#0009!important} /* hud-fidelity-v3418.css */ /* Bottom HUD: a single aligned composition; all labels and controls remain live. */ #gameScreen{--client-status-width:calc(var(--er3419-vw, 1vw) * 18);--client-shortcut-width:calc(var(--er3419-vw, 1vw) * 22);--er-hud-height:clamp(132px,calc(var(--er3419-vw, 1vw) * 15.35),230px);--er3418-center:calc(calc(var(--er3419-vw, 1vw) * 100) - var(--client-status-width) - var(--client-shortcut-width));--er3418-frame-height:calc(var(--er3418-center) * .139)} #gameScreen .character-panel,#gameScreen .bottom-nav{filter:drop-shadow(0 -1px 1px #0009)} #gameScreen .classic-log-box.er20-chat{background:#34353b url('/assets/classic-remaster/hud-stone-v3437.png') repeat!important;border-left:2px ridge #a29b85!important;border-right:3px ridge #a29b85!important;border-bottom:2px solid #817e73!important;padding:9px 20px 2px 5px!important;box-shadow:inset 0 2px 3px #000b,inset 0 -1px #bab6a14d!important} #gameScreen .er33-chat-stone{display:none!important} #gameScreen .er33-dragon-frame{left:-2%!important;right:-2%!important;top:calc(4px - var(--er3418-frame-height))!important;height:var(--er3418-frame-height)!important;max-height:none!important;background-image:url('/assets/classic-remaster/hud-dragon-v3418.svg')!important;background-size:100% 100%!important;background-position:center!important;clip-path:none!important;z-index:6!important;pointer-events:none!important} #gameScreen .er20-vitals{left:7.15%!important;right:7.15%!important;top:calc(4px - var(--er3418-frame-height) * .365)!important;height:calc(var(--er3418-frame-height) * .185)!important;grid-template-columns:1fr 15.3% 1fr!important;z-index:7!important;pointer-events:none!important} #gameScreen .er20-meter{height:100%!important;background:linear-gradient(#08090d,#27252b 45%,#111217)!important;box-shadow:inset 0 2px 4px #000d,inset 0 -1px 2px #000!important;border:0!important;overflow:hidden!important} #gameScreen .er20-hp .er20-fill{background:linear-gradient(#240400 0%,#78140b 11%,#bd3926 27%,#e26443 34%,#9a2015 45%,#69100a 76%,#310400 100%)!important;box-shadow:inset 0 1px #f6ad6855,inset 0 -2px #18000099} #gameScreen .er20-mp .er20-fill{background:linear-gradient(#1a1a26,#454352 17%,#79768e 32%,#a5a0b5 36%,#646174 49%,#3c394d 78%,#1e1b2c)!important;box-shadow:inset 0 1px #e8dcff55,inset 0 -2px #09071299} #gameScreen .er20-meter::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px);pointer-events:none} #gameScreen .er20-meter span{z-index:2;font:bold clamp(9px,calc(var(--er3419-vw, 1vw) * 1.04),17px)/1 Georgia,'ClassicTC',serif!important;letter-spacing:.02em;text-shadow:-1px -1px #151012,1px 1px #000,0 0 3px #000!important} #gameScreen .er20-chat .classic-log-text{font:clamp(11px,calc(var(--er3419-vw, 1vw) * 1.12),17px)/1.42 'ClassicTC','PMingLiU',serif!important;color:#d6ce9d!important;text-shadow:1px 1px #18191d;padding:2px 4px!important} #gameScreen .er20-chat .classic-chat-row{border-top:2px ridge #8f9093!important;border-bottom:1px solid #17181c;background:#292b32 url('/assets/classic-remaster/hud-stone-v3437.png')!important;box-shadow:inset 0 2px 4px #0007;height:clamp(21px,calc(var(--er3419-vw, 1vw) * 2.05),31px)!important;flex-basis:clamp(21px,calc(var(--er3419-vw, 1vw) * 2.05),31px)!important;align-items:center} #gameScreen .er20-chat .classic-chat-row input{font-family:'ClassicTC','PMingLiU',serif!important;padding:0 5px!important;text-shadow:1px 1px #000} #gameScreen .er20-chat .classic-chat-row input::placeholder{color:#a5a49c;opacity:.75} #gameScreen .er33-chat-channel{display:block!important;width:18px!important;min-width:18px!important;height:100%!important;padding:0!important;background:linear-gradient(90deg,#642c81,#c98de0,#78349e)!important;border:1px solid #c3a0c5!important;border-radius:0!important;color:#f9edff!important;font:bold 17px Georgia!important;text-shadow:1px 1px #4e235b} #gameScreen .er33-chat-scroll{right:1px;top:10px;bottom:4px;width:14px;background:linear-gradient(90deg,#29282a,#a5a4aa 38%,#57565d 65%,#1e1f25);border-left:1px solid #121214;border-right:1px solid #c4c1ac;box-shadow:inset 1px 0 2px #0008} #gameScreen .er33-chat-scroll button{height:16px;flex-shrink:0;border:2px ridge #d0cec2;background:radial-gradient(ellipse at 35% 24%,#c7c7c9,#6b6b72 48%,#33343c);color:#eee7cb;box-shadow:0 1px 2px #000;font:bold 9px/1 Georgia} #gameScreen .er19-head::before{inset:19% 3% 18% 2%!important;background:linear-gradient(#171b23,#2d303b 48%,#151923)!important} #gameScreen .er33-exp-fill{display:block!important;inset:19% auto 18% 2%!important;z-index:1!important;max-width:95%;background:linear-gradient(#603e1f,#bc8748 36%,#9b642e 58%,#69411c)!important;clip-path:none} #gameScreen #er19-level,#gameScreen #er19-exp{z-index:2!important;background:transparent!important;font:bold clamp(9px,calc(var(--er3419-vw, 1vw) * 1.02),17px)/1 Georgia,'ClassicTC',serif!important;text-shadow:1px 1px #000,-1px -1px #202026} #gameScreen .er19-cell span{background:linear-gradient(#1b202a,#303744 50%,#1a1f29)!important;color:#f0ede1!important;left:34%!important;right:8%!important;top:25%!important;bottom:23%!important;text-shadow:1px 1px #000!important;font-family:Georgia,'ClassicTC',serif!important} #gameScreen .er19-cell.er19-amber span{background:linear-gradient(90deg,#946a35 var(--er3418-stat-fill,0%),#252a34 0)!important;box-shadow:inset 0 1px 3px #0008} #gameScreen .er19-law>span,#gameScreen .er19-law>b{background:linear-gradient(#273243,#354764 45%,#202e46)!important;text-shadow:1px 1px #000!important;font-family:Georgia,'ClassicTC',serif!important;top:26%!important;bottom:23%!important} #gameScreen .er19-law>span{left:20%!important;width:51%!important} #gameScreen .er19-law>b{left:68%!important;right:7%!important} #gameScreen .bottom-nav{border:3px ridge #b1a07a!important;background:#17191c url('/assets/classic-remaster/hud-stone-v3437.png')!important;padding:2px 2px calc(var(--client-shortcut-width) / 9 + 1px)!important;box-shadow:inset 0 0 0 1px #24221b,0 0 0 1px #16140f!important;gap:1px!important} #gameScreen .bottom-nav .hud17-key{border:1px solid #8b7c5f!important;background:radial-gradient(ellipse at 50% 30%,#292a2c,#141619 80%)!important;box-shadow:inset 1px 1px #b2a17a2b,inset -1px -1px #000b!important;transition:background-color .1s,box-shadow .1s} #gameScreen .bottom-nav .hud17-key:hover{background:radial-gradient(ellipse,#55452f,#201d19)!important;box-shadow:inset 0 0 0 1px #cdb58688!important} #gameScreen .bottom-nav .hud17-key:active,#gameScreen .bottom-nav .hud17-key.hud17-drop{box-shadow:inset 0 0 8px #000,0 0 0 1px #dfc381!important} #gameScreen .bottom-nav .hud17-key img{width:76%!important;height:76%!important;filter:drop-shadow(1px 2px 1px #000b);image-rendering:pixelated} #gameScreen .bottom-nav .hud17-key:not(:has(.hud17-itemname))>small{font:bold clamp(12px,calc(var(--er3419-vw, 1vw) * 2.05),32px) Georgia!important;color:#55575c!important;opacity:.4!important;text-shadow:1px 1px #0b0c0e;transform:skew(-8deg)} #gameScreen .bottom-nav .hud17-key em{color:#f0ecd6;text-shadow:1px 1px #000,-1px -1px #000;font-style:normal} #gameScreen .bottom-nav button.er-classic-menu{border:1px ridge #b9a77b!important;box-shadow:inset 0 1px #f4d79588,inset 0 -1px #40351d!important;background-color:#b59c6d!important;filter:saturate(.84) contrast(1.08);transition:filter .1s} #gameScreen .bottom-nav button.er-classic-menu:hover{filter:brightness(1.22) saturate(.95)} #gameScreen .bottom-nav button.er-classic-menu:active{filter:brightness(.75)} #gameScreen .er-hotkey-pages{top:-18px!important;height:18px!important;gap:2px!important} #gameScreen .er-hotkey-pages button{width:clamp(26px,calc(var(--er3419-vw, 1vw) * 2.8),42px)!important;height:18px!important;border:2px ridge #afa58e!important;border-radius:4px 4px 0 0!important;background:linear-gradient(#373739,#141619)!important;color:#8d8b83!important;font:bold 11px/1 Georgia!important;box-shadow:inset 0 1px #ffffff13} #gameScreen .er-hotkey-pages button.active{background:linear-gradient(#5c574a,#28282b)!important;color:#fff3cf!important;border-bottom-color:#2d2b26!important} #gameScreen .er-hotkey-pages button:focus-visible,#gameScreen .bottom-nav button:focus-visible{outline:2px solid #f3d590!important;outline-offset:-3px} @media(orientation:portrait){#gameScreen{--client-status-width:calc(var(--er3419-vw, 1vw) * 25);--client-shortcut-width:calc(var(--er3419-vw, 1vw) * 31);--er-hud-height:clamp(112px,calc(var(--er3419-vw, 1vw) * 22),160px)}#gameScreen .er20-meter span{font-size:8px!important}#gameScreen .er20-chat .classic-log-text{font-size:10px!important;line-height:1.4!important}#gameScreen .classic-log-box.er20-chat{padding-right:15px!important;padding-left:2px!important}#gameScreen .er33-chat-scroll{width:11px}#gameScreen #er19-level,#gameScreen #er19-exp,#gameScreen .er19-cell span,#gameScreen .er19-law>span,#gameScreen .er19-law>b{font-size:8px!important}#gameScreen .er19-law>span{width:47%!important}#gameScreen .er19-law>b{left:67%!important}} @media(max-height:500px) and (orientation:landscape){#gameScreen{--er-hud-height:clamp(95px,calc(var(--er3419-vw, 1vw) * 14),142px)}} #gameScreen .er19-head,#gameScreen .er19-duo,#gameScreen .er19-law,#gameScreen .er19-land{height:auto!important;min-height:0!important} #gameScreen .er20-vitals{pointer-events:auto!important} #gameScreen .er33-zone-label[data-zone-type="normal"]{color:#ece7dc!important;text-shadow:1px 1px #111,0 0 3px #000} @media(max-width:700px){#gameScreen .arena .er33-zone-label{bottom:24px!important;font-size:12px!important}} /* hud-layout-v3419.css */ /* One 4:3 client surface, centred without stretching. Outside it is letterbox. */ body:has(#gameScreen:not([hidden])){background:#080808!important} #gameScreen.game-screen:not([hidden]){inset:auto!important;left:calc((100vw - min(100vw,133.333333dvh)) / 2)!important;top:calc((100dvh - min(100dvh,75vw)) / 2)!important;width:min(100vw,133.333333dvh)!important;height:min(100dvh,75vw)!important;min-height:0!important;transform:none!important;--client-status-width:calc(var(--er3419-vw) * 18);--client-shortcut-width:calc(var(--er3419-vw) * 22);--er-hud-height:calc(var(--er3419-vw) * 15.6);--er3418-center:calc(var(--er3419-vw) * 60);--er3418-frame-height:calc(var(--er3418-center) * .139)} #gameScreen .character-panel{width:var(--client-status-width)!important} #gameScreen .classic-log-box.er20-chat{left:var(--client-status-width)!important;right:var(--client-shortcut-width)!important} #gameScreen .bottom-nav{width:var(--client-shortcut-width)!important;padding-bottom:calc(var(--client-shortcut-width) * .19)!important} #gameScreen .bottom-nav button.er-classic-menu{left:calc(var(--menu-index) * 100% / 7)!important;width:calc(100% / 7)!important;height:calc(var(--client-shortcut-width) * .19)!important;border:0!important;box-shadow:none!important;filter:none!important;image-rendering:auto} #gameScreen .bottom-nav button.er-classic-menu:hover{filter:brightness(1.15)!important} #gameScreen .bottom-nav button.er-classic-menu:active{filter:brightness(.8)!important} #gameScreen .er20-meter span{font-size:clamp(4px,calc(var(--er3419-vw) * 1.04),18px)!important} #gameScreen .character-panel{cursor:pointer} #gameScreen .er-stats-window{left:var(--er3419-left,0px)!important;top:var(--er3419-top,0px)!important} #gameScreen .er3411-exit{right:var(--er3419-right,0px)!important;top:var(--er3419-top,0px)!important} body>.er3411-overlay,body>.er317-shade,body>.bag-modal-overlay,body>.er18-overlay{inset:auto!important;left:var(--er3419-left,0px)!important;top:var(--er3419-top,0px)!important;width:var(--er3419-width,100vw)!important;height:var(--er3419-height,100dvh)!important} /* Real scroll track and draggable silver handle; no imitation fixed-position dots. */ #gameScreen .er33-chat-scroll{top:7px;bottom:3px;width:16px;right:1px;display:grid;grid-template-rows:17px minmax(0,1fr) 17px 19px;gap:0;border:0;background:transparent;box-shadow:none;touch-action:none} #gameScreen .er33-chat-scroll>button{height:auto;width:100%;min-height:0;margin:0;border:0;border-radius:0;padding:0;color:transparent;background-image:url('/assets/classic-remaster/chat-scroll-reference-v3419.png');background-repeat:no-repeat;box-shadow:none} #gameScreen .er3419-chat-track{position:relative;min-height:0;touch-action:none;background:linear-gradient(90deg,#1a1b22 0%,#42434b 20%,#b0b0b6 35%,#666871 55%,#23242d 80%,#111218 100%);border-left:1px solid #ccc6b380;border-right:1px solid #15151a;outline:none} #gameScreen .er3419-chat-track:focus-visible{outline:1px solid #e4d3aa} #gameScreen .er3419-chat-thumb{position:absolute;left:-2px;width:18px;min-height:12px;padding:0;margin:0;border:1px ridge #ddd9cc;border-radius:2px;background:linear-gradient(#e1e1e3,#6a6d78 13%,#c8c8ce 36%,#525561 50%,#a5a8b1 73%,#383b46);box-shadow:0 1px 2px #000a,inset 1px 0 #eeeeeebb;cursor:ns-resize;touch-action:none} #gameScreen .er3419-chat-thumb::after{content:'';position:absolute;left:2px;right:2px;top:calc(50% - 2px);height:4px;border-top:1px solid #252630;border-bottom:1px solid #d2d0ce88} #gameScreen .er3419-chat-thumb:active{filter:brightness(1.15)} #gameScreen .er3419-chat-thumb[hidden]{display:none} #gameScreen .er33-chat-scroll button:focus-visible{outline:1px solid #f2dfb6;outline-offset:-1px} #gameScreen.game-screen:not([hidden]){--er3418-frame-height:calc(var(--er3418-center) * .105);--er3419-rail:clamp(8px,calc(var(--er3419-vw) * 1.6),26px)} #gameScreen .classic-log-box.er20-chat{padding-right:calc(var(--er3419-rail) + 5px)!important} #gameScreen .er33-chat-scroll{width:var(--er3419-rail);grid-template-columns:minmax(0,1fr);grid-template-rows:var(--er3419-rail) minmax(0,1fr) var(--er3419-rail) var(--er3419-rail);justify-content:stretch;align-items:stretch} #gameScreen .er3419-chat-track{border:0;background:linear-gradient(90deg,#292b34 0 30%,#535762 38%,#e6e6ed 47%,#a5a8b4 57%,#454954 68%,#292b34 76% 100%)} #gameScreen .er33-chat-scroll .er3419-chat-thumb{left:-2px;width:calc(100% + 4px);height:24px;min-height:0;border:0!important;border-radius:0!important;box-shadow:none!important;background:url('/assets/classic-remaster/chat-scroll-reference-v3419.png') 72.7273% 72.7811% / 134.375% 834.783% no-repeat!important} #gameScreen .er3419-chat-thumb::after{display:none} #gameScreen .er19-law>span{display:flex!important} body:has(#gameScreen:not([hidden]))>.toast,body:has(#gameScreen:not([hidden]))>#toast,body:has(#gameScreen:not([hidden]))>#hud17-notice{left:calc(var(--er3419-left) + var(--er3419-width) / 2)!important;bottom:calc(var(--er3419-bottom) + var(--er3419-vw) * 18)!important} /* npc-crafting-v3420.css */ /* Classic NPC conversation: plain text choices first, requirements on a second page. */ .er3411-overlay.er3420-npc-overlay{display:block!important;background:transparent!important;pointer-events:none!important;padding:0!important} .er3411-dialog.er3420-craft{position:fixed!important;right:calc(var(--er3419-right,0px) + 12 * var(--er33-u))!important;top:calc(var(--er3419-top,0px) + 8 * var(--er33-u))!important;width:calc(270 * var(--er33-u))!important;height:calc(370 * var(--er33-u))!important;max-width:var(--er3419-width,100vw)!important;max-height:calc(var(--er3419-height,100dvh) * .78)!important;box-sizing:border-box;pointer-events:auto;overflow:hidden!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#d4d3bf;font:calc(11 * var(--er33-u))/1.35 'ClassicTC','PMingLiU',serif;text-shadow:1px 1px #101115;isolation:isolate} .er3420-craft>.er33-frame{z-index:0!important;background:#36373c url('/assets/classic-remaster/hud-stone-v3437.png')!important} .er3420-craft>h2{position:absolute!important;left:calc(18 * var(--er33-u));top:calc(16 * var(--er33-u));margin:0!important;padding:0!important;font:bold calc(11 * var(--er33-u))/1.3 'ClassicTC','PMingLiU',serif!important;color:#e2dfd1;z-index:2;cursor:move;touch-action:none;right:calc(30 * var(--er33-u))} .er3420-craft>.er3411-close{position:absolute;top:calc(1 * var(--er33-u))!important;right:calc(4 * var(--er33-u))!important;padding:0!important;border:0!important;background:transparent!important;color:#e6e0c9!important;font:bold calc(8 * var(--er33-u))/1.2 Georgia,serif!important;z-index:3} .er3420-craft-body{position:absolute;inset:calc(43 * var(--er33-u)) calc(16 * var(--er33-u)) calc(27 * var(--er33-u)) calc(17 * var(--er33-u));z-index:1;overflow:auto;overscroll-behavior:contain;padding:calc(2 * var(--er33-u)) calc(7 * var(--er33-u)) calc(8 * var(--er33-u));background:#24252a url('/assets/classic-remaster/hud-stone-v3437.png');background-blend-mode:multiply;border:1px inset #999b98;border-radius:calc(4 * var(--er33-u));scrollbar-width:thin;scrollbar-color:#baab80 #272830} .er3420-npc-greeting{margin:0 0 calc(16 * var(--er33-u));white-space:pre-line;color:#aaa9a4} .er3420-craft-choices{display:flex;flex-direction:column;align-items:flex-start;gap:0} .er3420-craft .er3420-craft-link{display:block!important;width:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;color:#d4d7a4!important;text-align:left;font:inherit!important;line-height:1.28!important;text-shadow:1px 1px #151613;cursor:pointer} .er3420-craft .er3420-craft-link:hover,.er3420-craft .er3420-craft-link:focus-visible{color:#62c966!important;outline:0!important} .er3420-craft .er3420-craft-link:disabled{opacity:.55;cursor:wait} .er3420-craft .er3420-craft-back{margin-top:calc(14 * var(--er33-u))!important} .er3420-craft-product{color:#e0dfab;margin:0 0 calc(14 * var(--er33-u));font:inherit} .er3420-craft-explanation{margin:0 0 calc(9 * var(--er33-u));color:#bfbeb2} .er3420-craft-materials{list-style:none;padding:0;margin:0 0 calc(17 * var(--er33-u));line-height:1.5} .er3420-craft-materials small{font:inherit;color:#8e9687} .er3420-craft-message{position:absolute;z-index:2;bottom:calc(8 * var(--er33-u));left:calc(19 * var(--er33-u));right:calc(18 * var(--er33-u));margin:0;font-size:calc(9 * var(--er33-u));line-height:1.2;max-height:calc(20 * var(--er33-u));overflow:auto;color:#d8c99b} .er3420-craft .er3420-craft-choices{display:flex!important;gap:0!important;margin:0!important} .er3420-craft-body{right:calc(27 * var(--er33-u));scrollbar-width:none} .er3420-craft-body::-webkit-scrollbar{display:none} .er3420-craft-rail{position:absolute;z-index:2;top:calc(29 * var(--er33-u));bottom:calc(24 * var(--er33-u));right:calc(5 * var(--er33-u));width:calc(15 * var(--er33-u));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:calc(16 * var(--er33-u)) minmax(0,1fr) calc(16 * var(--er33-u));gap:0;touch-action:none} .er3420-craft .er3420-craft-rail button{min-height:0;padding:0;margin:0;border:0!important;border-radius:0;background-color:transparent!important;background-repeat:no-repeat;box-shadow:none;cursor:pointer} .er3420-craft-track{position:relative;min-height:0;touch-action:none;background:linear-gradient(90deg,transparent 25%,#615b3d 33%,#c5bf8c 43%,#5a5136 49%,#2c291d 59%,#cbbf8d 67%,#e9ddab 74%,transparent 81%);outline:none} .er3420-craft-track:focus-visible{outline:1px dotted #c2b586} .er3420-craft .er3420-craft-thumb{position:absolute;left:0;width:100%;cursor:ns-resize!important} .er3420-craft .er3420-craft-thumb[hidden]{display:none} .er3420-craft-body{background:linear-gradient(#0005,#0005),url('/assets/classic-remaster/hud-stone-v3437.png') #27282c;background-blend-mode:normal} /* V3.4.21 social/settings: native conversation shell with plain choices. */ .er-standard-window.er3421-conversation{width:calc(246 * var(--er33-u));height:calc(330 * var(--er33-u));padding:0!important;overflow:hidden} .er3421-conversation>header{position:absolute!important;left:calc(18 * var(--er33-u));right:calc(27 * var(--er33-u));top:calc(16 * var(--er33-u));height:auto!important;margin:0!important;color:#deded1;font-size:calc(11 * var(--er33-u));touch-action:none} .er3421-conversation .er3421-close{position:absolute;right:calc(-23 * var(--er33-u));top:calc(-15 * var(--er33-u));padding:0!important;background:transparent!important;border:0!important;font:bold calc(8 * var(--er33-u)) Georgia,serif!important} .er3421-conversation>.er-standard-body{display:flex;flex-direction:column;align-items:stretch;gap:0;height:auto!important;padding-top:calc(5 * var(--er33-u));font-size:calc(11 * var(--er33-u))} .er3421-conversation .er-standard-body>button{display:block;align-self:flex-start;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;min-height:0!important;color:#d4d7a4!important;line-height:1.35;font:inherit;text-align:left} .er3421-conversation .er-standard-body>button:hover,.er3421-conversation .er-standard-body>button:focus-visible{color:#62c966!important;outline:1px dotted #b7ba85} .er3421-conversation .er-standard-body p{margin:0 0 calc(10 * var(--er33-u))} .er3421-conversation .er-standard-body label{margin:calc(4 * var(--er33-u)) 0} #gameScreen .er3421-conversation>.er-standard-body{position:absolute!important;inset:calc(12 * var(--er33-u)) calc(27 * var(--er33-u)) calc(17 * var(--er33-u)) calc(12 * var(--er33-u));height:auto!important;min-width:0;width:auto!important;box-sizing:border-box;padding:calc(37 * var(--er33-u)) calc(6 * var(--er33-u)) calc(8 * var(--er33-u));z-index:1} #gameScreen .er3421-conversation>header{z-index:3} #gameScreen .er3421-conversation>.er33-frame.er-ref-frame{border:0!important;border-image:none!important;background:#36373c url('/assets/classic-remaster/hud-stone-v3437.png')!important;box-shadow:none!important} #gameScreen .er3421-conversation>.er33-frame>.er-ref-border.tr,#gameScreen .er3421-conversation>.er33-frame>.er-ref-border.r,#gameScreen .er3421-conversation>.er33-frame>.er-ref-border.br{transform:scaleX(-1)!important} .er3422-polymorph .er3422-poly-level{color:#a6a6a0;margin:calc(9 * var(--er33-u)) 0 calc(3 * var(--er33-u));font:inherit}.er3422-polymorph .er3420-craft-link[aria-pressed=true]{color:#69c968!important}.er3422-polymorph .er3420-craft-link:disabled{color:#78786f!important;cursor:not-allowed} /* creation-ats-v3426.css */ /* Native artwork from owner's reference; functional controls are independent HTML. */ #selectScreen #createPanel.lineage-creator:not([hidden]){position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#000 url('/assets/classic-creation-v3426/reference.svg') center/100% 100% no-repeat;box-shadow:none;font-family:ClassicTC,Georgia,serif;color:#e1dfc8;container-type:inline-size} #createPanel.lineage-creator::before,#createPanel.lineage-creator::after,.lineage-heading,.lineage-bonuses,.lineage-lore-symbol,.lineage-crown,.lineage-platform,.lineage-legal{display:none!important} #createPanel .lineage-layout{display:block!important;position:absolute;inset:0;padding:0} #createPanel .lineage-left{position:absolute;left:6.4%;top:10%;width:31.7%;height:77%;background:linear-gradient(90deg,#e1ddc5,#eeebd9 48%,#dedbc5);padding:2.1% 3%;box-sizing:border-box;border:0;box-shadow:none} #createPanel .lineage-lore{padding:0;border:0;background:none;box-shadow:none;height:auto;color:#242016} #createPanel .lineage-frame-title{text-align:left;font-size:2.1cqw;font-weight:bold;color:#242016;margin:0 0 1em} #createPanel #creationJobLore{font-size:1.75cqw;line-height:1.8;color:#242016;white-space:pre-line;margin:0} #createPanel .lineage-center{position:absolute;left:48%;top:3%;width:49%;height:59%;display:block;background:none} #createPanel .lineage-character-stand{position:absolute;left:23%;top:1%;width:54%;height:93%;min-height:0;margin:0;background:#000;border:0;box-shadow:none} #createPanel #creationCharacterArt{position:absolute;left:50%;top:0;transform:translateX(-50%);width:auto;height:113%;max-height:none;max-width:none;filter:none;object-fit:contain} #createPanel .lineage-class-choices{position:absolute;inset:0;display:block;z-index:2;margin:0} #createPanel .lineage-class{position:absolute;width:20%;height:24%;padding:0;border:0;border-radius:0;background-image:url('/assets/classic-creation-v3426/reference.svg');background-repeat:no-repeat;background-size:1000% 769%;background-color:#000;box-shadow:none;filter:brightness(.72);cursor:pointer} #createPanel .lineage-class.chosen,#createPanel .lineage-class:hover{filter:brightness(1.35);outline:1px solid #baa45c66;box-shadow:0 0 10px #e1c47855} #createPanel .lineage-class[data-job='王族']{left:7%;top:4%;background-position:60.8% 8.7%} #createPanel .lineage-class[data-job='騎士']{left:7%;top:32%;background-position:60.8% 26.5%} #createPanel .lineage-class[data-job='妖精']{right:3%;top:4%;background-position:97.6% 8.7%} #createPanel .lineage-class[data-job='法師']{right:3%;top:32%;background-position:97.6% 29.3%} #createPanel .lineage-sex-choices{position:absolute;left:11%;right:3%;bottom:0;display:flex;justify-content:space-between;gap:0;margin:0} #createPanel .lineage-sex{color:#bcb995;background:#050504;border:0;padding:.1em .8em;font-size:3cqw;min-height:0;box-shadow:none} #createPanel .lineage-sex.chosen{color:#fffae6;text-shadow:0 0 8px #e1d59b} #createPanel .lineage-right{position:absolute;left:49%;right:2%;top:64%;bottom:1.6%;padding:0;background:#000;border:0;box-shadow:none} #createPanel .lineage-attribute-title{position:absolute;left:39%;top:0;width:21%;font-size:0;text-align:center;padding:0;border:0} #createPanel #remainingPoints{display:block;color:#dfdfc7;font-size:1.55cqw;line-height:1.2;white-space:normal;margin:0} #createPanel #creationStats{position:absolute;left:0;right:0;top:22%;height:34%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);grid-auto-flow:column;gap:1% 23%} #createPanel .creation-stat{display:grid;grid-template-columns:1fr 13% 12% 12%;grid-template-rows:1fr;gap:1%;padding:0;border:0;align-items:center;font-size:1.55cqw;line-height:1;color:#dddcc7;background:none} #createPanel .creation-stat span{font-size:inherit;white-space:nowrap} #createPanel .creation-stat strong{grid-column:2;grid-row:1;font-size:inherit;color:#f3f1dd;text-align:right} #createPanel .creation-stat button{width:100%;min-width:0;height:1.25cqw;min-height:0;padding:0;font-size:1.15cqw;line-height:1;background:linear-gradient(#696a75,#272831);border:1px solid #90909a;color:#e1e0d4;border-radius:0;box-shadow:none} #createPanel .creation-stat button:first-of-type{grid-column:4;grid-row:1} #createPanel .creation-stat button:last-of-type{grid-column:3;grid-row:1} #createPanel .lineage-auto{position:absolute;left:39%;top:47%;width:20%;display:flex;justify-content:center;margin:0} #createPanel #rollPoints{background:#171818;color:#d8d8c9;border:1px outset #8a8a7b;font-size:3.5cqw;line-height:1;padding:0 .1em;border-radius:0;box-shadow:none;min-height:0} #createPanel #resetPoints{position:absolute;left:-155%;top:0;white-space:nowrap;min-height:0;padding:.2em .5em;font-size:1.2cqw;border-radius:0} #createPanel .lineage-name{position:absolute;left:0;right:0;top:70%;display:flex;align-items:center;gap:4%;font-size:1.5cqw;white-space:nowrap;margin:0;color:#dddac6} #createPanel .lineage-name input{width:59%;margin:0;padding:.15em .4em;min-height:0;font-size:1.5cqw;color:#eee;background:#141414;border:1px inset #303033;border-radius:0} #createPanel .lineage-actions{position:absolute;bottom:0;left:25%;right:0;display:flex;gap:8%;margin:0} #createPanel .lineage-actions button{font-size:1.4cqw;min-height:0;padding:.15em 1em;border-radius:0;border:1px outset #6e6b5e;background:#1c1b17;color:#d8d4ba;box-shadow:none} #createPanel #createError{position:absolute;left:0;top:83%;font-size:1.25cqw;line-height:1.1;margin:0;z-index:3;background:#000} /* Keep circle above center of the dragon crest. The photographed timer is never used. */ #gameScreen .er3426-ats-status{position:absolute;left:50%;top:calc(3px - var(--er3418-frame-height) * 1.11);transform:translate(-50%,-50%);z-index:12;display:flex;align-items:center;flex-direction:column;pointer-events:none;width:max-content} #gameScreen .er3426-ats-circle{width:clamp(29px,calc(var(--er3419-vw,1vw) * 4.8),70px);height:clamp(29px,calc(var(--er3419-vw,1vw) * 4.8),70px);padding:0;min-height:0;border:0;border-radius:50%;background:transparent url('/assets/classic-creation-v3426/ats-circle.svg') center/contain no-repeat;filter:grayscale(.85) brightness(.65);box-shadow:none;pointer-events:auto;cursor:pointer} #gameScreen .er3426-ats-status[data-running='true'] .er3426-ats-circle{filter:none} #gameScreen .er3426-ats-circle:focus-visible{outline:2px solid #ffcf8a;outline-offset:2px} #gameScreen .er3426-ats-time{color:#ffe0c6;text-shadow:0 1px 2px #000,0 0 4px #811500;font-size:clamp(9px,calc(var(--er3419-vw,1vw) * 1.1),16px);line-height:1.2;white-space:nowrap} #createPanel .lineage-class-choices{pointer-events:none} #createPanel .lineage-class{pointer-events:auto} #createPanel .lineage-sex-choices{z-index:3} #selectScreen #createPanel.lineage-creator,#createPanel button,#createPanel input{font-family:ClassicTC,Georgia,serif} #createPanel .lineage-class{background:transparent!important;border:0!important;outline:0!important} #createPanel .lineage-class.chosen{box-shadow:inset 0 0 24px #e5d68c44} #createPanel .lineage-character-stand{left:31%;width:38%;top:0;height:105%} #createPanel #creationCharacterArt{height:100%} #createPanel[data-job='騎士'][data-gender='男'] .lineage-character-stand{background:transparent} #createPanel[data-job='騎士'][data-gender='男'] #creationCharacterArt{opacity:0} #createPanel[data-job='騎士'] .lineage-left{background:transparent} #createPanel[data-job='騎士'] .lineage-lore{visibility:hidden} #createPanel .lineage-sex-choices{background:#000;left:4%;right:0;bottom:-4%;padding:0 3%;box-sizing:border-box} #createPanel .lineage-sex{font-size:3cqw} #createPanel #resetPoints{display:none} #createPanel .lineage-attribute-title{top:-2%;background:#000} #createPanel .lineage-attribute-title::before{content:'Remaining Points';display:block;color:#d4d0b6;font-size:1.4cqw;line-height:1.1} #createPanel #remainingPoints{font-size:1.4cqw} #gameScreen .er3426-ats-status{top:calc(3px - var(--er3418-frame-height) * .76)} #createPanel[data-job='法師'][data-gender='男'] #creationCharacterArt{clip-path:inset(0 0 19% 0)} #createPanel .lineage-center{z-index:1;min-height:0} #createPanel .lineage-right{z-index:2} #createPanel .lineage-layout{min-height:0} #createPanel .lineage-lore{min-height:0} #createPanel .lineage-class.chosen,#createPanel .lineage-class:hover{box-shadow:none} #createPanel .creation-stat:nth-child(n+4){grid-template-columns:12% 12% 13% 1fr} #createPanel .creation-stat:nth-child(n+4) span{grid-column:4;grid-row:1;text-align:left;padding-left:.3em} #createPanel .creation-stat:nth-child(n+4) strong{grid-column:3;grid-row:1} #createPanel .creation-stat:nth-child(n+4) button:first-of-type{grid-column:2;grid-row:1} #createPanel .creation-stat:nth-child(n+4) button:last-of-type{grid-column:1;grid-row:1} /* mobile-client.css */ /* Portrait phone client. Desktop styling remains unchanged outside .er-mobile. */ .mobile-hud,.mobile-location,.mobile-dock,.mobile-nav,.mobile-custom,.mobile-bag-head,.mobile-bag-filters,.mobile-item-detail,.mobile-bag-tools{display:none} html.er-mobile{--mobile-nav:66px;--mobile-dock:154px;--mobile-hud:78px;--mobile-safe:env(safe-area-inset-bottom,0px);--mobile-top-safe:env(safe-area-inset-top,0px);--mobile-surface:#25272c url('/assets/classic-remaster/hud-stone-v3437.png');overscroll-behavior:none} html.er-mobile body{overflow-x:hidden;touch-action:manipulation;-webkit-text-size-adjust:100%} html.er-mobile button{touch-action:manipulation;-webkit-tap-highlight-color:transparent} html.er-mobile input,html.er-mobile select,html.er-mobile textarea{font-size:16px!important} html.er-mobile #gameScreen.game-screen:not([hidden]){inset:auto!important;left:0!important;top:var(--mobile-top,0px)!important;width:100%!important;height:var(--mobile-height,100dvh)!important;min-height:0!important;--er33-u:1px;--er-hud-height:calc(var(--mobile-dock) + var(--mobile-nav));--er-classic-hud-height:calc(var(--mobile-dock) + var(--mobile-nav));background:#15191b!important;isolation:isolate} html.er-mobile #gameScreen .game-wrap{position:absolute!important;inset:0!important;overflow:hidden!important;min-width:0!important} html.er-mobile #gameScreen .character-panel,html.er-mobile #gameScreen .classic-log-box,html.er-mobile #gameScreen .bottom-nav,html.er-mobile #gameScreen .topline,html.er-mobile #gameScreen .quick-note,html.er-mobile #gameScreen .er33-zone-label{display:none!important} html.er-mobile #gameScreen .arena{inset:calc(var(--mobile-hud) + var(--mobile-top-safe)) 0 calc(var(--mobile-dock) + var(--mobile-nav) + var(--mobile-safe))!important;width:100%!important;height:auto!important;border:0!important;background:transparent!important} html.er-mobile #gameScreen .arena-top{display:none!important} html.er-mobile #gameScreen .battlefield{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;display:block!important;background:transparent!important;overflow:hidden!important} html.er-mobile #gameScreen .er-map-backdrop{inset:0!important} html.er-mobile #gameScreen .battlefield>.combatant{position:absolute!important;left:10%!important;top:50%!important;bottom:auto!important;width:27%!important;max-width:130px!important;height:110px!important;transform:translateY(-30%)!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;z-index:3!important} html.er-mobile #gameScreen #playerSprite{width:96px!important;height:110px!important;min-width:0!important;max-width:100%!important} html.er-mobile #gameScreen #playerSprite .er3414-form-canvas{max-height:150px!important;max-width:160px!important;object-fit:contain} html.er-mobile #gameScreen #playerLabel{font-size:11px!important;line-height:1.2!important;white-space:nowrap} html.er-mobile #gameScreen .monster-group{position:absolute!important;left:42%!important;right:12%!important;top:20%!important;bottom:10%!important;width:auto!important;height:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-around!important;gap:0!important} html.er-mobile #gameScreen .monster-card{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:90px!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;gap:1px!important;padding:0!important;touch-action:manipulation} html.er-mobile #gameScreen .monster-card:nth-child(2){align-self:flex-end!important;margin-left:20%!important} html.er-mobile #gameScreen .monster-card .monster-sprite{width:90px!important;height:70px!important;max-height:70px!important;min-height:0!important;scale:1.15!important;background-size:contain!important;background-position:center bottom!important} html.er-mobile #gameScreen .monster-card .unit-label{font-size:11px!important;min-height:14px!important;line-height:1!important} html.er-mobile #gameScreen .monster-hp-track{width:64px!important;height:4px!important;margin:0!important} html.er-mobile #gameScreen .monster-hp-text{display:none!important} html.er-mobile #gameScreen .battlefield .vs,html.er-mobile #gameScreen .battlefield .rune{display:none!important} html.er-mobile #gameScreen .er33-merchants{position:absolute!important;inset:35px 10px 0 38%!important} html.er-mobile #gameScreen .er33-merchant{width:58px!important;height:90px!important;max-height:95px!important;transform:translate(-50%,-50%)!important} html.er-mobile #gameScreen .er3411-npc-function,html.er-mobile #gameScreen .er3411-npc-name{font-size:10px!important;white-space:nowrap!important} html.er-mobile #gameScreen>#er-active-effects{top:calc(var(--mobile-hud) + var(--mobile-top-safe) + 42px)!important;right:4px!important;gap:5px!important;max-height:calc(100% - var(--mobile-dock) - var(--mobile-nav) - 135px)!important;z-index:20!important} html.er-mobile .er-status-icon{width:32px!important;height:42px!important;cursor:pointer} html.er-mobile .er-status-icon img{width:30px!important;height:30px!important} html.er-mobile .er-status-icon small{font:10px/12px Georgia,serif!important} html.er-mobile .mobile-hud{display:grid;position:absolute;inset:0 0 auto;height:calc(var(--mobile-hud) + var(--mobile-top-safe));padding:calc(7px + var(--mobile-top-safe)) 9px 7px;grid-template-columns:49px 1fr 92px;grid-template-rows:21px 1fr;gap:3px 8px;background:var(--mobile-surface);border:1px solid #a18b5c;border-radius:0 0 5px 5px;box-shadow:0 3px 12px #0008;z-index:50;color:#e9d7af} html.er-mobile .mobile-portrait{grid-row:1/3;width:49px;height:59px;overflow:hidden;padding:0;background:#11171a;border:1px solid #9b8254;border-radius:3px} html.er-mobile .mobile-portrait img{width:100%;height:100%;object-fit:contain;object-position:center 12%;image-rendering:pixelated} html.er-mobile .mobile-identity{display:flex;gap:7px;align-items:center;min-width:0;grid-column:2;white-space:nowrap} html.er-mobile .mobile-identity strong{font-size:14px;overflow:hidden;text-overflow:ellipsis} html.er-mobile .mobile-identity small{font-size:10px;color:#c6bdab} html.er-mobile .mobile-resources{grid-column:2/4;grid-row:2;display:grid;gap:4px;align-content:center} html.er-mobile .mobile-meter{position:relative;height:17px;background:#111518;border:1px solid #8c7855;border-radius:3px;overflow:hidden} html.er-mobile .mobile-meter i{position:absolute;inset:1px auto 1px 1px;background:linear-gradient(#e65b54,#8c1816 65%,#b93228);width:0;transition:width .15s} html.er-mobile .mobile-meter.mp i{background:linear-gradient(#80b0e1,#1b4c8a 65%,#326db2)} html.er-mobile .mobile-meter span{position:relative;display:block;text-align:center;font:11px/15px Georgia,serif;color:#fff6df;text-shadow:1px 1px 2px #000} html.er-mobile .mobile-gold{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:3px;font:12px Georgia,serif} html.er-mobile .mobile-gold img{width:19px;height:19px;object-fit:contain} html.er-mobile .mobile-location{display:flex;justify-content:space-between;align-items:center;position:absolute;left:8px;right:8px;top:calc(var(--mobile-hud) + var(--mobile-top-safe) + 5px);z-index:15;pointer-events:none} html.er-mobile .mobile-location span{background:#111a;border:1px solid #a08b60;padding:6px 10px;font-size:12px;text-shadow:1px 1px #000;border-radius:3px;max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.er-mobile .mobile-location button{pointer-events:auto;padding:6px 12px;min-height:34px;background:var(--mobile-surface);border:1px solid #a08b60;color:#e9d7af;border-radius:3px} html.er-mobile .mobile-dock{display:flex;flex-direction:column;position:absolute;left:0;right:0;bottom:calc(var(--mobile-nav) + var(--mobile-safe));height:var(--mobile-dock);padding:8px 8px 6px;gap:6px;background:var(--mobile-surface);border:1px solid #8b7853;z-index:50} html.er-mobile .mobile-run{display:flex;align-items:center;gap:8px;height:53px} html.er-mobile .mobile-run>div{flex:1;display:flex;flex-direction:column;gap:4px;padding-left:13px;position:relative;font-size:13px} html.er-mobile .mobile-run>div::before{content:'';position:absolute;left:0;top:3px;width:7px;height:7px;border-radius:50%;background:#777} html.er-mobile .mobile-run[data-running=true]>div::before{background:#8ede59;box-shadow:0 0 8px #9fee67} html.er-mobile .mobile-run small{font:12px Georgia;color:#a4b5bf} html.er-mobile .mobile-run button{min-height:39px;background:#252831;border:1px solid #a28b5b;color:#ecd6ac;border-radius:4px;padding:5px 10px;font-size:12px} html.er-mobile .mobile-run .mobile-ats{height:52px;min-width:58px;border:3px ridge #b99a64;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6e7158,#2d3335 65%);font:bold 15px Georgia,serif;box-shadow:0 0 0 2px #15191b} html.er-mobile .mobile-run[data-running=true] .mobile-ats{background:radial-gradient(circle at 35% 30%,#a64e3e,#4b1a19 65%)} html.er-mobile .mobile-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 37px;gap:5px;height:61px} html.er-mobile .mobile-quick button{position:relative;background:linear-gradient(#181d22,#0e1216);border:1px solid #9b8156;border-radius:4px;min-width:0;min-height:0;padding:3px;color:#d9c49a} html.er-mobile .mobile-quick img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated} html.er-mobile .mobile-quick small{position:absolute;right:4px;bottom:2px;font-size:11px;text-shadow:1px 1px #000} html.er-mobile .mobile-quick-edit{font-size:11px;writing-mode:vertical-rl;letter-spacing:3px} html.er-mobile .mobile-xp{position:relative;height:13px;border:1px solid #887957;background:#10151a;overflow:hidden;border-radius:2px} html.er-mobile .mobile-xp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#9cbb65,#557338);width:0} html.er-mobile .mobile-xp span{position:relative;display:block;padding-left:7px;font:9px/11px Georgia;color:white;text-shadow:1px 1px #000} html.er-mobile .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:absolute;left:0;right:0;bottom:0;height:calc(var(--mobile-nav) + var(--mobile-safe));padding-bottom:var(--mobile-safe);background:#13171b;z-index:30000;border-top:1px solid #b89b64;gap:2px} html.er-mobile .mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;padding:0;border:1px solid #7d6d4e;border-radius:3px;background:var(--mobile-surface);color:#dfd3b4;font-size:12px} html.er-mobile .mobile-nav button[aria-pressed=true]{border-color:#e6c98b;background-color:#48402e;box-shadow:inset 0 0 14px #c7a55340;color:#fff2c5} html.er-mobile .mobile-menu-art{display:block;width:30px;height:34px;background-repeat:no-repeat;image-rendering:pixelated} /* Existing functional panels become mobile sheets. */ html.er-mobile #gameScreen #detailPanel:not([hidden]),html.er-mobile #gameScreen .zone-panel:not([hidden]),html.er-mobile .er18-window,html.er-mobile .er-standard-window,html.er-mobile .er-ats-window,html.er-mobile .er33-shop,html.er-mobile .er3411-dialog,html.er-mobile .bag-modal,html.er-mobile .mobile-sheet{position:fixed!important;left:4px!important;right:4px!important;top:auto!important;bottom:calc(var(--mobile-nav) + var(--mobile-safe))!important;width:calc(100% - 8px)!important;max-width:560px!important;height:min(69dvh,650px)!important;max-height:calc(var(--mobile-height) - var(--mobile-hud) - var(--mobile-nav) - var(--mobile-top-safe))!important;min-height:0!important;padding:12px!important;margin:0 auto!important;transform:none!important;background:var(--mobile-surface)!important;border:1px solid #b6a074!important;border-radius:8px 8px 0 0!important;box-shadow:0 -8px 24px #0007!important;z-index:20000!important;box-sizing:border-box!important;overflow:auto!important;font-size:14px!important;color:#e5d5b0!important;touch-action:pan-y!important} html.er-mobile .er18-overlay,html.er-mobile .er3411-overlay,html.er-mobile .bag-modal-overlay{position:fixed!important;inset:0!important;width:100%!important;height:var(--mobile-height)!important;background:transparent!important;pointer-events:none!important;z-index:22000!important} html.er-mobile .er18-window,html.er-mobile .er3411-dialog,html.er-mobile .bag-modal{pointer-events:auto!important} html.er-mobile .er33-frame,html.er-mobile .er-native-inset,html.er-mobile .er3430-scroll{display:none!important} html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory]:not([hidden]){padding:0!important;overflow:hidden!important;display:grid!important;grid-template-rows:43px 39px minmax(60px,1fr) auto 43px!important;gap:0!important;isolation:isolate} html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory]>.section-title,html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory]>.er-close-x,html.er-mobile .er3430-controls{display:none!important} html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory] #detailBody{position:relative!important;inset:auto!important;grid-row:3!important;width:100%!important;height:100%!important;min-height:0!important;padding:5px 9px!important;overflow:hidden!important} html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid{height:100%!important;min-height:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:70px!important;background:#0d1217!important;overflow-y:auto!important;scrollbar-width:thin!important;scrollbar-color:#a38c58 #20242b!important;touch-action:pan-y!important} html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory] .bag-tile{height:70px!important;border:1px solid #57513f!important;background:linear-gradient(#11171c,#0a0e12)!important;min-width:0!important;position:relative!important} html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory] .bag-tile.mobile-selected{outline:2px solid #d1b16d;outline-offset:-2px;box-shadow:inset 0 0 10px #a8843d55!important} html.er-mobile #gameScreen #detailPanel .bag-icon,html.er-mobile #gameScreen #detailPanel .item-pixel-image{width:44px!important;height:44px!important;object-fit:contain!important} html.er-mobile #gameScreen #detailPanel .bag-count{font-size:12px!important;right:3px!important;bottom:2px!important} html.er-mobile .bag-equipped-on{font-size:11px!important} html.er-mobile .bag-hover-name,html.er-mobile .bag-note,html.er-mobile #er-item-tooltip,html.er-mobile #er306-gold-tooltip{display:none!important} html.er-mobile .mobile-bag-head{display:flex;grid-row:1;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid #746342} html.er-mobile .mobile-bag-head h2{margin:0;font:20px Georgia,serif;flex:1} html.er-mobile .mobile-bag-head small{font-size:11px;color:#b8b4a4} html.er-mobile .mobile-bag-head button,html.er-mobile .mobile-custom>header button{background:#20252b;border:1px solid #ad9366;padding:5px 10px;min-height:32px;border-radius:4px;color:#e6d2a9;font-size:12px} html.er-mobile .mobile-bag-filters{grid-row:2;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px 9px} html.er-mobile .mobile-bag-filters button,html.er-mobile .mobile-bag-tools button,html.er-mobile .mobile-item-actions button{background:linear-gradient(#3c3f43,#20252c);border:1px solid #8a7957;border-radius:3px;color:#e2d2ae;padding:5px;font-size:13px;min-width:0} html.er-mobile .mobile-bag-filters button[aria-pressed=true]{background:linear-gradient(#796443,#443722);border-color:#d2b87e} html.er-mobile .mobile-item-detail{display:grid;grid-row:4;grid-template-columns:48px minmax(0,1fr);gap:4px 8px;padding:7px 10px;border-top:1px solid #7f6f4e;background:#12191e;min-height:46px} html.er-mobile .mobile-item-detail>img{grid-row:1/3;width:44px;height:44px;object-fit:contain} html.er-mobile .mobile-item-detail strong{font-size:14px;color:#d8bf80;align-self:center} html.er-mobile .mobile-item-detail small{font-size:11px;line-height:1.4;max-height:30px;overflow:hidden;white-space:pre-line;color:#bcbdb6} html.er-mobile .mobile-item-detail p{grid-column:1/-1;font-size:12px;margin:6px 0;color:#b4b7b5} html.er-mobile .mobile-item-actions{display:flex;grid-column:1/-1;gap:5px} html.er-mobile .mobile-item-actions button{flex:1;min-height:34px} html.er-mobile .mobile-bag-tools{display:grid;grid-row:5;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 9px} html.er-mobile .mobile-custom{display:flex!important;flex-direction:column!important;padding:0!important;z-index:24500!important} html.er-mobile .mobile-custom>header{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid #7e6b46;gap:8px;flex-shrink:0} html.er-mobile .mobile-custom h2{font-size:18px;margin:0;flex:1} html.er-mobile .mobile-sheet-body{overflow:auto;padding:12px;min-height:0;flex:1;touch-action:pan-y;overscroll-behavior:contain} html.er-mobile .mobile-sheet-body>button{display:block;width:100%;padding:12px;margin:6px 0;color:#e9d5ab;background:#222a30;border:1px solid #8c7750;border-radius:4px;min-height:43px} html.er-mobile .mobile-item-full{white-space:pre-line;line-height:1.8;font-size:14px} html.er-mobile .mobile-stat-grid{display:grid;grid-template-columns:repeat(2,1fr 1fr);gap:8px;margin:10px 0 18px;font-size:13px} html.er-mobile .mobile-stat-grid dt{color:#a8b4bd}.er-mobile .mobile-stat-grid dd{margin:0;text-align:right;color:#e4d6b7} html.er-mobile .mobile-equipment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} html.er-mobile .mobile-equip-slot{min-height:96px;display:flex;flex-direction:column;align-items:center;padding:5px;gap:3px;background:#12191f;border:1px solid #7e6b49;color:#cfc7b2;border-radius:3px;font-size:11px} html.er-mobile .mobile-equip-slot img{width:38px;height:38px;object-fit:contain} html.er-mobile .mobile-equip-slot small{font-size:11px;color:#a79570} /* Readable native spells and settings; they retain their actual handlers. */ html.er-mobile .er18-window{display:flex!important;flex-direction:column!important;padding:10px!important;overflow:hidden!important} html.er-mobile .er18-head{position:relative!important;inset:auto!important;height:37px!important;flex:0 0 37px!important;display:flex!important;font-size:18px!important;color:#e7d5b0!important} html.er-mobile .er18-head .er18-close{left:auto!important;right:0!important;top:0!important;width:54px!important;height:32px!important;font-size:12px!important} html.er-mobile .er18-content{position:relative!important;inset:auto!important;flex:1!important;width:100%!important;height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:47px 1fr;grid-template-rows:minmax(70px,1fr) 70px 22px;gap:5px;padding:0!important;overflow:hidden!important} html.er-mobile .er3425-spell-pages{position:relative!important;inset:auto!important;width:47px!important;grid-column:1;grid-row:1/4;overflow:auto!important;gap:3px!important} html.er-mobile .er3425-spell-pages button{width:44px!important;min-height:35px!important;height:35px!important;font-size:12px!important} html.er-mobile .er18-content .er18-grid{position:relative!important;inset:auto!important;grid-column:2;grid-row:1;width:100%!important;height:100%!important;min-height:0!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;grid-auto-rows:58px!important;overflow:auto!important;flex:none!important} html.er-mobile .er18-grid .er18-tile{height:58px!important;min-height:0!important;width:auto!important} html.er-mobile .er18-tile img{width:37px!important;height:37px!important;object-fit:contain} html.er-mobile .er-ref-spell-description{position:relative!important;inset:auto!important;grid-column:2;grid-row:2;font-size:12px!important;white-space:pre-line;overflow:auto!important;height:auto!important} html.er-mobile .er-ref-spell-footer{position:relative!important;inset:auto!important;grid-column:2;grid-row:3;font-size:11px!important} html.er-mobile .er-ref-spell-rail{display:none!important} html.er-mobile .er-standard-window>header{position:relative!important;inset:auto!important;height:35px!important;padding:0!important;font-size:18px!important} html.er-mobile .er-standard-window .er3421-close{top:0!important;left:auto!important;right:0!important;min-height:32px!important;font-size:12px!important} html.er-mobile #gameScreen .er-standard-window>.er-standard-body{position:relative!important;inset:auto!important;height:calc(100% - 35px)!important;width:100%!important;padding:10px!important;overflow:auto!important;font-size:15px!important} html.er-mobile .er-standard-body>button{min-height:43px!important;padding:8px!important} html.er-mobile .er-ats-window{display:flex!important;flex-direction:column!important;gap:8px} html.er-mobile .er-ats-window>header{font-size:18px!important} html.er-mobile .er-ats-window button{min-height:34px;font-size:13px} html.er-mobile .er-ats-body{min-height:0!important;flex:1;overflow:auto!important;font-size:13px} html.er-mobile .er-ats-window .er-ats-grid{grid-template-columns:repeat(4,1fr)!important} html.er-mobile .er-ats-window .er-ats-slot{min-height:49px!important;height:49px!important} html.er-mobile .er-ats-window>footer{flex-wrap:wrap;font-size:12px!important} html.er-mobile .er-ats-picker{position:absolute!important;inset:50px 12px auto!important;background:#222a30!important;padding:12px!important;z-index:50!important} html.er-mobile .er3411-dialog>h2{position:relative!important;inset:auto!important;font-size:17px!important;height:auto!important;margin:0 0 15px!important;color:#e3d3b0!important} html.er-mobile .er3411-dialog>.er3411-close{position:absolute!important;left:auto!important;right:8px!important;top:5px!important;font-size:12px!important;min-height:32px!important;z-index:5!important} html.er-mobile .er3411-dialog .er3420-craft-body,html.er-mobile .er3411-dialog .er3436-probability-body,html.er-mobile .er3430-teleports .er3412-teleport-columns{position:relative!important;inset:auto!important;width:100%!important;height:calc(100% - 40px)!important;max-height:none!important;padding:8px!important;overflow-y:auto!important;background:#151c21!important;font-size:14px!important} html.er-mobile .er3411-dialog .er3420-craft-link,html.er-mobile .er3412-teleport-point{min-height:38px!important;line-height:1.5!important;font-size:14px!important;padding:7px 3px!important} html.er-mobile .er3420-craft-rail{display:none!important} html.er-mobile #gameScreen .er3411-exit{position:fixed!important;left:10%!important;right:10%!important;top:25%!important;width:80%!important;height:auto!important;aspect-ratio:300/170;z-index:25000!important} html.er-mobile .er33-shop{display:flex!important;flex-direction:column!important;gap:8px} html.er-mobile .er33-shop-title{font-size:18px!important;min-height:34px!important} html.er-mobile .er33-shop-tabs{display:flex!important;position:relative!important;inset:auto!important} html.er-mobile .er33-shop-tabs button{font-size:15px!important;min-height:38px!important} html.er-mobile .er33-shop-list{position:relative!important;inset:auto!important;flex:1!important;min-height:70px!important;height:auto!important;overflow:auto!important;grid-template-columns:repeat(3,1fr)!important} html.er-mobile .er33-shop-footer{position:relative!important;inset:auto!important;display:flex!important;flex-wrap:wrap!important;gap:5px!important;font-size:13px!important} html.er-mobile .er33-shop-footer button{min-height:38px!important} html.er-mobile .er33-shop-money,html.er-mobile .er33-shop-message{position:relative!important;inset:auto!important;height:auto!important;font-size:12px!important;margin:0!important} /* Login, character selection and creation must not inherit a desktop 4:3 canvas. */ html.er-mobile #authScreen{min-height:var(--mobile-height,100dvh);padding:20px 15px;align-items:center} html.er-mobile .auth-card{padding:25px 20px;width:min(100%,420px)} html.er-mobile .auth-card h1{font-size:30px} html.er-mobile #selectScreen{min-height:var(--mobile-height,100dvh);padding:15px 10px;align-items:flex-start;overflow:auto} html.er-mobile #selectScreen .select-wrap{width:100%!important;height:auto!important;min-height:calc(var(--mobile-height) - 30px);aspect-ratio:auto!important;container-type:normal;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 20%,#302a21,#080b0e 70%);padding:10px;border:1px solid #766346} html.er-mobile #selectScreen .select-wrap>h1{display:block!important;font-size:23px!important;text-align:center;margin:12px 0!important;letter-spacing:3px} html.er-mobile #selectScreen #slots{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;min-height:220px;height:30dvh!important;margin:8px 0!important} html.er-mobile #selectScreen .slot{position:relative!important;height:100%!important;inset:auto!important;padding-bottom:10px!important;border:1px solid #4c4434!important;border-radius:5px!important} html.er-mobile #selectScreen .slot.selected{border-color:#c1a06b!important;background:#71552722!important} html.er-mobile #selectScreen .slot-info{font-size:12px!important} html.er-mobile #selectScreen .slot-icon{height:80%!important} html.er-mobile #classicSelectionDetails{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;padding:12px!important;gap:6px 18px!important;font-size:12px!important;margin-bottom:10px} html.er-mobile #classicSelectionDetails h2{font-size:16px!important} html.er-mobile #classicSelectionControls{position:relative!important;inset:auto!important;display:flex!important;flex-direction:row!important;gap:8px!important;justify-content:center!important} html.er-mobile #classicSelectionControls button{flex:1;min-height:45px;font-size:17px!important;border:1px solid #8c754e!important;background:#292822!important;border-radius:4px} html.er-mobile #selectScreen #accountLogout{display:block!important;position:relative!important;inset:auto!important;margin:12px auto!important;min-height:36px} html.er-mobile #selectScreen:has(#createPanel:not([hidden])) #slots,html.er-mobile #selectScreen:has(#createPanel:not([hidden])) #classicSelectionDetails,html.er-mobile #selectScreen:has(#createPanel:not([hidden])) #classicSelectionControls{display:none!important} html.er-mobile #selectScreen #createPanel.lineage-creator:not([hidden]){position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;background:none!important;container-type:normal;border:0!important} html.er-mobile #createPanel .lineage-layout{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important} html.er-mobile #createPanel .lineage-left{display:none!important} html.er-mobile #createPanel .lineage-center{position:relative!important;inset:auto!important;width:100%!important;height:240px!important;flex-shrink:0;background:#070a0b!important} html.er-mobile #createPanel .lineage-character-stand{left:25%!important;top:0!important;width:50%!important;height:195px!important} html.er-mobile #createPanel #creationCharacterArt{height:100%!important;max-width:100%!important;object-fit:contain!important} html.er-mobile #createPanel .lineage-class-choices{inset:0 0 44px!important} html.er-mobile #createPanel .lineage-class{width:20%!important;height:45%!important} html.er-mobile #createPanel .lineage-class[data-job=王族]{left:0!important;top:0!important} html.er-mobile #createPanel .lineage-class[data-job=騎士]{left:0!important;top:50%!important} html.er-mobile #createPanel .lineage-class[data-job=妖精]{right:0!important;top:0!important} html.er-mobile #createPanel .lineage-class[data-job=法師]{right:0!important;top:50%!important} html.er-mobile #createPanel .lineage-sex-choices{left:15%!important;right:15%!important;bottom:0!important;height:40px!important} html.er-mobile #createPanel .lineage-sex{font-size:17px!important;min-height:38px!important} html.er-mobile #createPanel .lineage-right{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;padding:10px 0!important;display:flex!important;flex-direction:column!important;gap:10px!important} html.er-mobile #createPanel .lineage-attribute-title{position:relative!important;inset:auto!important;width:auto!important;font-size:15px!important;text-align:left!important} html.er-mobile #createPanel #remainingPoints{display:inline!important;font-size:16px!important;margin-left:12px!important} html.er-mobile #createPanel #creationStats{position:relative!important;inset:auto!important;height:auto!important;width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;grid-auto-flow:row!important;grid-template-rows:auto!important;gap:5px 10px!important} html.er-mobile #createPanel .creation-stat{display:grid!important;grid-template-columns:minmax(0,1fr) 25px 30px 30px!important;gap:3px!important;min-height:36px!important;font-size:12px!important} html.er-mobile #createPanel .creation-stat button{height:33px!important;min-height:33px!important;width:30px!important;font-size:20px!important} html.er-mobile #createPanel .lineage-auto{position:relative!important;inset:auto!important;display:flex!important;width:auto!important;gap:15px!important;justify-content:center!important} html.er-mobile #createPanel #rollPoints,html.er-mobile #createPanel #resetPoints{position:relative!important;inset:auto!important;font-size:15px!important;min-height:36px!important;padding:5px 15px!important} html.er-mobile #createPanel .lineage-name{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;font-size:13px!important;gap:4px!important} html.er-mobile #createPanel .lineage-name input{position:relative!important;inset:auto!important;width:100%!important;min-height:44px!important;padding:10px!important;margin:0!important} html.er-mobile #createPanel .lineage-actions{position:relative!important;inset:auto!important;display:flex!important;gap:8px!important;width:100%!important} html.er-mobile #createPanel .lineage-actions button{position:relative!important;inset:auto!important;width:auto!important;flex:1!important;font-size:15px!important;min-height:44px!important;padding:10px!important} html.er-mobile #createPanel #createError{position:relative!important;inset:auto!important;font-size:12px!important;margin:0!important} html.er-mobile .toast,html.er-mobile #toast,html.er-mobile #hud17-notice{position:fixed!important;left:50%!important;bottom:calc(var(--mobile-nav) + 12px)!important;max-width:90vw!important;z-index:50000!important;font-size:13px!important} @media(max-height:520px){html.er-mobile{--mobile-hud:64px;--mobile-nav:52px;--mobile-dock:105px}.er-mobile .mobile-hud{padding-top:3px!important;padding-bottom:3px!important}.er-mobile .mobile-run{height:32px!important}.er-mobile .mobile-run .mobile-ats{height:36px!important}.er-mobile .mobile-quick{height:42px!important}.er-mobile .mobile-quick img{height:28px!important;width:28px!important}.er-mobile .mobile-portrait{height:50px!important}.er-mobile .mobile-nav .mobile-menu-art{height:25px!important;width:25px!important}.er-mobile .mobile-nav button{font-size:10px!important}} html.er-mobile #gameScreen #detailPanel .er3430-scroll,html.er-mobile #gameScreen #detailPanel>.er33-frame,html.er-mobile #gameScreen #detailPanel>.er-native-inset{display:none!important} html.er-mobile .mobile-loot{display:block;position:absolute;left:8px;right:8px;bottom:calc(var(--mobile-dock) + var(--mobile-nav) + var(--mobile-safe) + 5px);max-height:43px;overflow:hidden;padding:5px 7px;z-index:14;background:#09101499;border:1px solid #77654477;border-radius:3px;color:#e9d2a0;font:11px/16px system-ui,'ClassicTC',sans-serif;white-space:pre-line;pointer-events:none} html.er-mobile .mobile-reconnect{position:absolute;left:10%;right:10%;top:85px;background:#672a25;color:#fff1d3;border:1px solid #caa978;padding:12px;z-index:40000;font-size:14px} html.er-mobile .mobile-hud,html.er-mobile .mobile-sheet,html.er-mobile #gameScreen #detailPanel{font-family:-apple-system,system-ui,'ClassicTC',sans-serif!important} .mobile-loot,.mobile-reconnect{display:none} html.er-mobile .mobile-reconnect:not([hidden]){display:block} html.er-mobile #er18-book .er18-content>.er18-grid{grid-auto-rows:58px!important;grid-template-rows:none!important;align-content:start!important;height:100%!important;flex:none!important} html.er-mobile #er18-book .er18-grid>.er18-tile{height:58px!important;aspect-ratio:auto!important;display:flex!important;align-items:center!important;justify-content:center!important} html.er-mobile #er18-book .er18-glyph,html.er-mobile #er18-book .er18-glyph img{width:37px!important;height:37px!important} html.er-mobile #er18-book .er3425-spell-pages button{flex:0 0 38px!important;border-radius:4px!important;padding:3px!important} html.er-mobile .er3411-dialog.er3430-teleports .er3412-teleport-group>button{font:14px/1.5 -apple-system,system-ui,'ClassicTC',sans-serif!important;min-height:42px!important;padding:9px 5px!important;width:100%!important;border-bottom:1px solid #65583a66!important;text-align:left!important} html.er-mobile .er3411-dialog.er3430-teleports .er3412-teleport-group>h3{font-size:16px!important;margin:8px 0!important} html.er-mobile #selectScreen .select-wrap::before,html.er-mobile #selectScreen .select-wrap::after{display:none!important} html.er-mobile #selectScreen .slot-info{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important} html.er-mobile #selectScreen #classicSelectionDetails{pointer-events:auto!important;background:#131a20!important;min-height:0!important} html.er-mobile #selectScreen #classicSelectionDetails>div,html.er-mobile #selectScreen #classicSelectionDetails>h2{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:24px!important;display:flex!important;justify-content:space-between!important;gap:8px!important;white-space:normal!important} html.er-mobile #selectScreen #classicSelectionDetails h2{grid-column:1/-1!important} html.er-mobile #selectScreen #classicSelectionDetails>div>span{position:relative!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important;font-size:11px!important;color:#a6b0b9!important} html.er-mobile #selectScreen #classicSelectionDetails b{position:relative!important;width:auto!important;min-width:0!important;height:auto!important;font-size:12px!important;padding:0!important;border:0!important;background:none!important;text-align:right!important;line-height:1.4!important} html.er-mobile #selectScreen #classicSelectionControls button{color:#e7d5a9!important;text-shadow:none!important} html.er-mobile #createPanel .lineage-center{height:280px!important} html.er-mobile #createPanel .lineage-character-stand{height:195px!important;top:0!important} html.er-mobile #createPanel #creationCharacterArt{opacity:1!important;clip-path:none!important} html.er-mobile #createPanel .lineage-class-choices{position:absolute!important;left:0!important;right:0!important;top:198px!important;bottom:auto!important;height:39px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:5px!important} html.er-mobile #createPanel .lineage-class-choices .lineage-class{position:relative!important;inset:auto!important;width:100%!important;height:38px!important;background:#262c30!important;border:1px solid #85704e!important;color:#e2cfaa!important;font:15px system-ui,'ClassicTC',sans-serif!important} html.er-mobile #createPanel .lineage-class-choices .lineage-class.chosen{border-color:#e4c17b!important;background:#655235!important} html.er-mobile #createPanel .lineage-attribute-title::before{display:none!important} html.er-mobile #createPanel #resetPoints{display:block!important} html.er-mobile #createPanel .creation-stat span{grid-column:1!important;grid-row:1!important;font-size:13px!important;white-space:nowrap!important;padding:0!important} html.er-mobile #createPanel .creation-stat strong{grid-column:2!important;grid-row:1!important;font-size:14px!important} html.er-mobile #createPanel .creation-stat button:first-of-type{grid-column:4!important;grid-row:1!important} html.er-mobile #createPanel .creation-stat button:last-of-type{grid-column:3!important;grid-row:1!important} html.er-mobile #gameScreen .er33-shop-list{display:block!important;grid-template-columns:none!important} html.er-mobile #gameScreen .er33-shop-row{display:grid!important;grid-template-columns:22px 32px minmax(0,1fr) 44px 47px!important;align-items:center!important;gap:4px!important;width:100%!important;min-height:54px!important;padding:4px!important;position:relative!important;font-size:12px!important;border-bottom:1px solid #75664766!important} html.er-mobile #gameScreen .er33-shop-row input[type=checkbox]{width:20px!important;height:20px!important;margin:0!important} html.er-mobile #gameScreen .er33-shop-quantity{width:47px!important;min-height:34px!important;margin:0!important;padding:4px!important} html.er-mobile #gameScreen .er33-shop-row img{width:30px!important;height:30px!important;object-fit:contain!important} html.er-mobile #gameScreen .er33-shop-name{white-space:normal!important;overflow-wrap:anywhere!important;font-size:12px!important} html.er-mobile #gameScreen .er33-shop-title .er33-close{position:absolute!important;left:auto!important;right:0!important;top:0!important;min-height:32px!important;width:50px!important;font-size:12px!important} html.er-mobile #gameScreen .er33-shop-row>*{position:static!important;inset:auto!important;transform:none!important;min-width:0!important} html.er-mobile #gameScreen .er33-shop-row>input[type=checkbox]{grid-column:1!important;grid-row:1!important} html.er-mobile #gameScreen .er33-shop-row>.er33-item-image{grid-column:2!important;grid-row:1!important} html.er-mobile #gameScreen .er33-shop-row>.er33-shop-name{grid-column:3!important;grid-row:1!important;width:auto!important;line-height:1.5!important} html.er-mobile #gameScreen .er33-shop-row>.er33-shop-price{grid-column:4!important;grid-row:1!important;font:11px Georgia,serif!important;text-align:right!important} html.er-mobile #gameScreen .er33-shop-row>.er33-shop-quantity{grid-column:5!important;grid-row:1!important;height:34px!important;font-size:16px!important} html.er-mobile #gameScreen .er33-shop-footer button{position:relative!important;inset:auto!important;min-width:74px!important;height:38px!important;width:auto!important;padding:5px 10px!important;font:14px system-ui,'ClassicTC',sans-serif!important;background:#31363e!important;border:1px solid #9d8558!important;color:#ecd5a8!important} html.er-mobile #gameScreen .er33-shop-total{flex:1!important;font-size:13px!important;min-width:110px!important} html.er-mobile #gameScreen .monster-card .monster-sprite{scale:2!important} html.er-mobile .mobile-bag-head h2{font-family:'ClassicTC',Georgia,serif!important} html.er-mobile #selectScreen .select-wrap>h1{font-family:'ClassicTC',Georgia,serif!important} html.er-mobile .er3411-dialog.er3433-appearance{display:flex!important;flex-direction:column!important;gap:5px!important} html.er-mobile .er3411-dialog.er3433-appearance>.er3433-tree{position:relative!important;inset:auto!important;width:100%!important;flex:1!important;height:auto!important;min-height:0!important;overflow:auto!important;font-size:14px!important;padding:6px!important} html.er-mobile .er3411-dialog.er3433-appearance .er3433-group>button,html.er-mobile .er3411-dialog.er3433-appearance .er3433-rows>button{font-size:14px!important;min-height:42px!important;padding:7px!important} html.er-mobile .er3411-dialog.er3433-appearance .er3433-toggle{width:17px!important;height:17px!important;font-size:12px!important} html.er-mobile .er3411-dialog.er3433-appearance>.er3433-release{position:relative!important;inset:auto!important;min-height:37px!important;flex:0 0 37px!important;font-size:14px!important} /* V3.4.43 inventory/spell sheets keep every quick slot exposed. */ html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory]:not([hidden]),html.er-mobile .er18-window{ bottom:calc(var(--mobile-nav) + var(--mobile-dock) + var(--mobile-safe) + 6px)!important; height:min(65dvh,650px,calc(var(--mobile-height) - var(--mobile-hud) - var(--mobile-top-safe) - var(--mobile-nav) - var(--mobile-dock) - var(--mobile-safe) - 14px))!important; max-height:calc(var(--mobile-height) - var(--mobile-hud) - var(--mobile-top-safe) - var(--mobile-nav) - var(--mobile-dock) - var(--mobile-safe) - 14px)!important; } html.er-mobile #gameScreen .bag-tile .er-enchant-level,html.er-mobile #gameScreen .bag-tile .bag-equipped-on{ font-size:calc(24 * var(--er33-u,1px))!important;font-weight:900!important;line-height:1!important;position:absolute!important;top:2px!important;bottom:auto!important;z-index:5!important;pointer-events:none; text-shadow:-1px -1px #000,1px -1px #000,-1px 1px #000,1px 1px #000!important; } html.er-mobile #gameScreen .bag-tile .er-enchant-level{left:2px!important;right:auto!important;color:#f6e7a4!important} html.er-mobile #gameScreen .bag-tile .bag-equipped-on{right:2px!important;left:auto!important;color:#35aaff!important} html.er-mobile .bag-tile,html.er-mobile .er18-tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .mobile-drag-ghost{position:fixed;width:54px;height:54px;display:grid;place-items:center;background:#101820e8;border:2px solid #e6c16c;border-radius:5px;pointer-events:none;z-index:2147483647;box-shadow:0 0 10px #000} .mobile-drag-ghost img{width:44px;height:44px;object-fit:contain;pointer-events:none} html.er-mobile .mobile-quick .mobile-drop-target{outline:3px solid #ffdb69!important;outline-offset:-3px;background:#65522b!important} html.er-mobile body.er-mobile-shortcut-drag .mobile-quick [data-mobile-quick-slot]{border-color:#eac879!important} @media(max-height:520px){ html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory]:not([hidden]){grid-template-rows:28px 30px minmax(0,1fr) 0 30px!important} html.er-mobile #gameScreen #detailPanel .mobile-item-detail{display:none!important} html.er-mobile .mobile-bag-head{padding:1px 8px!important}.er-mobile .mobile-bag-head h2{font-size:15px!important}.er-mobile .mobile-bag-head button{min-height:25px!important;padding:1px 5px!important} html.er-mobile .mobile-bag-filters,html.er-mobile .mobile-bag-tools{padding:1px 5px!important} html.er-mobile .er18-head{height:26px!important;flex-basis:26px!important} html.er-mobile .er18-content{grid-template-rows:minmax(0,1fr) 0 0!important} html.er-mobile .er-ref-spell-description,html.er-mobile .er-ref-spell-footer{display:none!important} } /* V3.4.63: mobile sheets own their coordinates, regardless of desktop drag state. */ html.er-mobile #gameScreen .er33-shop{left:4px!important;right:4px!important;top:auto!important;width:calc(100% - 8px)!important;transform:none!important;overflow:hidden!important;display:flex!important;flex-direction:column!important} html.er-mobile .er33-shop-list{flex:1!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important} html.er-mobile .er33-shop-title,html.er-mobile .er33-shop-tabs,html.er-mobile .er33-shop-footer,html.er-mobile .er33-shop-money,html.er-mobile .er33-shop-message{flex-shrink:0!important} html.er-mobile .er33-shop-quantity{cursor:pointer;touch-action:manipulation} .mobile-quantity-overlay{position:fixed;inset:0;z-index:2147483646;background:#000a;display:grid;place-items:center;padding:12px;box-sizing:border-box;touch-action:manipulation} .mobile-quantity-pad{width:min(320px,100%);max-height:95dvh;overflow:auto;background:#24272e;border:2px solid #b6a074;border-radius:12px;padding:16px;box-sizing:border-box;color:#e5d5b0;font:16px system-ui;text-align:center} .mobile-quantity-pad h2{font-size:19px;margin:0 0 10px}.mobile-quantity-pad output{display:block;padding:10px;background:#10151b;border:1px solid #b6a074;font-size:30px}.mobile-quantity-pad p{margin:8px 0;font-size:14px} .mobile-number-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mobile-number-actions{display:flex;gap:8px;margin-top:10px}.mobile-number-actions button{flex:1} .mobile-quantity-pad button{min-height:46px;font:20px system-ui;color:#efe0bc;background:#343942;border:1px solid #b6a074;border-radius:5px;touch-action:manipulation} .mobile-portrait-notice:not([hidden]){position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;background:#111;color:#e5d5b0;font:22px system-ui;padding:20px;text-align:center} /* V3.4.64: classic transparent item description beside the selected slot. */ html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory]:not([hidden]){grid-template-rows:43px 39px minmax(0,1fr) 43px!important} html.er-mobile .mobile-bag-tools{grid-row:4!important} html.er-mobile .mobile-item-detail,html.er-mobile .mobile-item-actions{display:none!important} html.er-mobile #er-item-tooltip:not([hidden]){display:block!important;max-width:min(240px,calc(100vw - 16px))!important;max-height:calc(var(--mobile-height,100dvh) - 24px)!important;overflow-y:auto!important;white-space:pre-line!important;font:14px/1.4 'ClassicTC',serif!important;background:rgba(0,0,0,.68)!important;border:1px solid #978d6880!important;padding:7px 9px!important;z-index:60000!important} html.er-mobile #er-item-tooltip[hidden]{display:none!important} html.er-mobile #er-item-tooltip .er-tip-name{font-size:15px!important;line-height:1.4!important;margin-bottom:4px!important} html.er-mobile #er-item-tooltip.er-pinned{pointer-events:none!important} /* V3.4.67: one portrait interface for phone and computer. */ html.er-mobile #gameScreen.game-screen:not([hidden]){left:50%!important;width:min(100%,480px)!important;transform:translateX(-50%)!important} html.er-mobile body{background:#090b0f} /* V3.4.69: combat stats sit above the separated resource bars. */ html.er-mobile{--mobile-hud:110px} html.er-mobile .mobile-hud{grid-template-rows:21px 17px minmax(0,1fr)!important;row-gap:3px!important} html.er-mobile .mobile-combat-stats{display:grid;grid-column:2/4;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;align-items:center;font-size:10px;color:#e8d7af;white-space:nowrap} html.er-mobile .mobile-resources{grid-row:3!important;gap:5px!important;align-content:start!important} html.er-mobile .mobile-meter{height:14px!important} html.er-mobile .mobile-meter span{font-size:10px!important;line-height:12px!important} html.er-mobile .mobile-xp{height:11px!important} html.er-mobile .mobile-xp span{font-size:9px!important;line-height:9px!important} html.er-mobile .mobile-portrait{grid-row:1/4!important;height:88px!important} /* V3.4.72: four-line scrollable work log and unobstructed controls. */ html.er-mobile .mobile-loot{height:74px!important;max-height:74px!important;box-sizing:border-box!important;overflow-y:auto!important;pointer-events:auto!important;touch-action:pan-y;white-space:normal!important;padding:4px 7px!important} html.er-mobile .mobile-work-line{height:16px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px} html.er-mobile #er-combat-sound{bottom:88px!important;z-index:30!important} html.er-mobile #er-recovery-status{bottom:88px!important;max-width:calc(100% - 90px);font-size:10px!important} html.er-mobile .mobile-run-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-wrap:wrap} html.er-mobile .mobile-run-heading #er-tile-coordinate{position:static!important;background:none!important;padding:0!important;font-size:13px!important;line-height:20px!important;white-space:nowrap;color:#fff0ce;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000} html.er-mobile #detailPanel .bag-tile[data-inventory-id],html.er-mobile .er18-tile.learned[data-skill-name],html.er-mobile .mobile-quick [data-mobile-quick-slot]{touch-action:pan-y!important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* V3.4.75 portrait ability sheet: allocation stays above the detail scroll. */ html.er-mobile #gameScreen .mobile-character-sheet{overflow:hidden!important;display:flex!important;flex-direction:column!important;padding:9px!important} html.er-mobile .mobile-character-sheet>.mobile-sheet-body{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden;gap:6px;padding:0} html.er-mobile .mobile-character-sheet>header{flex:none;padding-bottom:6px} html.er-mobile .mobile-character-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:none} html.er-mobile .mobile-character-tabs button{min-height:34px;border:1px solid #74603c;background:#151b20;color:#c6b99e;border-radius:3px} html.er-mobile .mobile-character-tabs button[aria-pressed=true]{border-color:#dbb97c;color:#ffe1a2;background:linear-gradient(#55432c,#2b2922)} html.er-mobile .mobile-ability-summary{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;flex:none} html.er-mobile .mobile-point-count{color:#ffdc84;white-space:nowrap} html.er-mobile .mobile-attribute-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;flex:none} html.er-mobile .mobile-attribute-card{display:grid;grid-template-columns:1fr auto;gap:2px 4px;background:linear-gradient(120deg,#172832,#142027);border:1px solid #657071;padding:5px 7px;border-radius:3px;min-width:0} html.er-mobile .mobile-attribute-card>span{font-size:12px;color:#c7bdab} html.er-mobile .mobile-attribute-card>strong{font:19px Georgia;color:#e5e5cc} html.er-mobile .mobile-attribute-card>small{font-size:9px;color:#a3b4bc;grid-column:1/-1} html.er-mobile .mobile-attribute-controls{display:flex;align-items:center;justify-content:space-between;grid-column:1/-1;gap:4px} html.er-mobile .mobile-attribute-controls button{min-width:34px;min-height:28px;padding:0;border:1px solid #9f8c61;color:#efdab3;background:#2c3437;border-radius:3px;font-size:18px} html.er-mobile .mobile-attribute-controls span{font-size:12px;color:#8df1ac} html.er-mobile .mobile-stat-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:6px;flex:none} html.er-mobile .mobile-stat-actions button{min-height:34px;border:1px solid #ad925a;background:#303638;color:#f4ddb2;border-radius:3px;font-size:12px;padding:3px} html.er-mobile .mobile-character-sheet button:disabled{opacity:.38;cursor:default} html.er-mobile .mobile-stat-hint{font-size:10px;line-height:1.4;color:#b6b5a6;margin:0;flex:none} html.er-mobile .mobile-ability-scroll{flex:1;min-height:45px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;border-top:1px solid #786948;padding-top:3px} html.er-mobile .mobile-ability-group{background:#11191cbc;margin:4px 0 7px;border:1px solid #62533c;border-radius:3px;overflow:hidden} html.er-mobile .mobile-ability-group h3{font-size:13px;color:#ead1a2;background:linear-gradient(90deg,#463728,#292523);margin:0;padding:5px 8px} html.er-mobile .mobile-ability-group dl{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:0;font-size:12px} html.er-mobile .mobile-ability-group dt,html.er-mobile .mobile-ability-group dd{padding:5px 8px;border-bottom:1px solid #aaa1;margin:0} html.er-mobile .mobile-ability-group dt{color:#beb7a7} html.er-mobile .mobile-ability-group dd{color:#dfc58c;text-align:right;max-width:170px;overflow-wrap:anywhere} @media(max-height:650px){html.er-mobile .mobile-attribute-card{padding:2px 5px}html.er-mobile .mobile-attribute-card>small{display:none}html.er-mobile .mobile-attribute-controls button{min-height:24px}html.er-mobile .mobile-character-sheet>.mobile-sheet-body{gap:3px}} /* Equipment surrounds the full class portrait; accessory slots use a separate foot row. */ html.er-mobile .mobile-paperdoll{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:repeat(6,64px) 57px;gap:5px;position:relative;max-width:420px;margin:0 auto;padding:8px;background:radial-gradient(ellipse at 50% 45%,#7c65233d,transparent 65%),linear-gradient(#0c1013,#171917);border:1px solid #756240;isolation:isolate} html.er-mobile .mobile-paperdoll-figure{grid-column:2;grid-row:1/7;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;margin:0;overflow:hidden} html.er-mobile .mobile-paperdoll-figure img{width:100%;height:calc(100% - 28px);min-height:0;object-fit:contain;filter:drop-shadow(0 0 12px #d9b44a33)} html.er-mobile .mobile-paperdoll-figure figcaption{text-align:center;font-size:11px;color:#d8c491;padding-top:8px} html.er-mobile .mobile-paperdoll-slot{position:relative;min-width:0;min-height:0;width:64px;height:64px;display:flex;align-items:center;justify-content:center;padding:3px 3px 15px;background:linear-gradient(#141b20,#090e12);border:1px solid #71674e;border-radius:1px;color:#aea68c;box-shadow:inset 0 0 9px #0009} html.er-mobile .mobile-paperdoll-slot.equipped{border-color:#bea46c;background:linear-gradient(140deg,#283645,#12181e)} html.er-mobile .mobile-paperdoll-slot img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated} html.er-mobile .mobile-paperdoll-slot small{position:absolute;bottom:2px;left:0;right:0;font-size:9px;line-height:11px;text-align:center;color:#c1b18a} html.er-mobile .mobile-slot-silhouette{opacity:.3;font-size:32px;filter:grayscale(1)} html.er-mobile .mobile-paperdoll-slot .mobile-equip-enchant{position:absolute;right:3px;bottom:14px;font-size:11px;color:#66c2ff;text-shadow:1px 1px #000} html.er-mobile .mobile-paperdoll-slot.accessory{grid-row:7;position:absolute;bottom:0;width:calc((100% - 15px)/4);height:56px;left:calc((var(--accessory) - 1)*(100% + 5px)/4)} html.er-mobile .mobile-reset-sheet .mobile-sheet-body{overflow-y:auto} html.er-mobile .mobile-reset-progress{color:#f5d28c;font-size:15px} html.er-mobile .mobile-reset-grid{display:grid;grid-template-columns:1fr;gap:7px;margin:12px 0} html.er-mobile .mobile-reset-grid>div{display:grid;grid-template-columns:1fr 36px 44px 36px;align-items:center;gap:6px;padding:7px;background:#142129;border:1px solid #6f644a} html.er-mobile .mobile-reset-grid strong{text-align:center;color:#f1db9c} html.er-mobile .mobile-reset-grid button{min-height:32px;border:1px solid #b09666;background:#29343a;color:#eee0c3;font-size:20px} html.er-mobile .mobile-reset-grid button:disabled{opacity:.35} html.er-mobile .mobile-reset-warning{font-size:11px;line-height:1.6;color:#dcba89} html.er-mobile .mobile-paperdoll-slot.empty img{opacity:.28;filter:grayscale(1)} /* Compact metal-framed combat values, with full accessible labels. */ html.er-mobile{--mobile-hud:115px} html.er-mobile #gameScreen .mobile-hud{grid-template-rows:21px 22px auto} html.er-mobile #gameScreen .mobile-combat-stats{gap:4px;height:22px;align-self:center} html.er-mobile .mobile-hud-stat{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;height:22px;padding:1px 4px;border:1px solid #877149;border-radius:3px;background:linear-gradient(165deg,#45433a,#242c30 40%,#141b20);box-shadow:inset 0 1px 0 #e4d8a226,inset 0 -1px 2px #0009,0 1px 2px #0007} html.er-mobile .mobile-hud-stat img{flex:0 0 16px;width:16px;height:16px;filter:drop-shadow(0 1px 1px #000)} html.er-mobile .mobile-hud-stat b{font:600 11px/1 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;color:#eddfb9;letter-spacing:.1px;text-shadow:0 1px 2px #000} html.er-mobile .mobile-hud-stat.ac b{color:#d7e8ee} html.er-mobile .mobile-hud-stat.mr b{color:#d6d0f0} html.er-mobile .mobile-hud-stat.lawful[data-alignment=lawful] b{color:#8cc9f2} html.er-mobile .mobile-hud-stat.lawful[data-alignment=evil] b{color:#f19c8e} @media(max-width:350px){html.er-mobile .mobile-hud-stat{padding:1px 2px;gap:2px}html.er-mobile .mobile-hud-stat img{width:13px;height:13px;flex-basis:13px}html.er-mobile .mobile-hud-stat b{font-size:10px}} html.er-mobile .mobile-paperdoll-figure img{mix-blend-mode:screen} html.er-mobile .mobile-paperdoll-figure img{mix-blend-mode:normal} html.er-mobile .mobile-paperdoll{--equip-slot:58px;grid-template-columns:var(--equip-slot) minmax(0,1fr) var(--equip-slot);grid-template-rows:repeat(6,var(--equip-slot)) 57px} html.er-mobile .mobile-paperdoll-slot:not(.accessory){width:var(--equip-slot);height:var(--equip-slot)} @media(max-height:760px){html.er-mobile .mobile-paperdoll{--equip-slot:50px}html.er-mobile .mobile-paperdoll-slot img{width:34px;height:34px}} /* Continuous spellbook sections share one scroll container. */ #er18-book .er-spell-section-title{grid-column:1/-1;margin:0;align-self:stretch;display:flex;align-items:center;padding:0 8px;box-sizing:border-box;color:#eee0b4;background:#292b29dd;border-block:1px solid #716247;font-size:14px;line-height:1.3;pointer-events:none} .mobile-key-label{display:none} html.er-keyboard-shortcuts .mobile-quick [data-mobile-quick-slot] .mobile-key-label{display:block;position:absolute;left:5px;top:3px;font:bold 14px/1 Georgia,serif;color:#b1a084;opacity:.75;text-shadow:0 1px 2px #000;pointer-events:none} html.er-keyboard-shortcuts .mobile-quick [data-mobile-quick-slot]:not(:has(img)) .mobile-key-label{left:50%;top:50%;transform:translate(-50%,-50%);font-size:24px;opacity:.45} html.er-keyboard-shortcuts .mobile-quick [data-mobile-quick-slot]:not(:has(img))>span{visibility:hidden} html.er-mobile .mobile-defeated-link{display:inline;border:0;background:none;padding:0;margin:0;color:#f4d594;font:inherit;line-height:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;vertical-align:baseline} .mobile-monster-drops .mobile-drop-basis{font-size:12px;color:#c2b69b;line-height:1.5}.mobile-drop-section h3{margin:14px 0 8px;font-size:16px;color:#edcf91}.mobile-drop-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #71634466;font-size:14px}.mobile-drop-row img{width:30px;height:30px;object-fit:contain}.mobile-drop-row b{font-variant-numeric:tabular-nums;color:#eed9a9;font-size:13px} html.er-mobile .mobile-hud-stat.weight[data-weight-state="warning"] b{color:#ffab46!important}html.er-mobile .mobile-hud-stat.weight[data-weight-state="blocked"] b{color:#ff5151!important} .bag-tile[data-cursed="true"] .bag-icon{filter:grayscale(1) brightness(.75) sepia(1) saturate(12) hue-rotate(345deg)!important}.er-tip-name[data-cursed="true"],.bag-tile[data-cursed="true"] .bag-hover-name{color:#ff6464!important} /* Read-only floating details must never intercept a swipe over inventory. */ html.er-mobile #er-item-tooltip,html.er-mobile #er-item-tooltip.er-pinned,html.er-mobile #er-item-tooltip *{pointer-events:none!important} html.er-mobile #gameScreen #detailPanel[data-classic-panel=inventory] .bag-grid{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;overflow-x:hidden!important} #er-character-delete{position:fixed;inset:0;z-index:2147483647;background:#000b;display:grid;place-items:center;padding:18px;box-sizing:border-box}#er-character-delete section{width:min(100%,380px);box-sizing:border-box;background:#25282e;color:#f0dfb6;border:1px solid #baa577;padding:22px;border-radius:8px;box-shadow:0 12px 50px #0009}#er-character-delete h2{font-size:21px;margin:0 0 14px}#er-character-delete p{line-height:1.7;min-height:80px}#er-character-delete button{padding:11px 18px;margin:5px;border:1px solid #a58f62;background:#55432b;color:#fff1cd;font-size:16px}#er-character-delete button:disabled{opacity:.5} /* V3.4.115: name, level and class +3px. */ html.er-mobile .mobile-identity strong{font-size:17px} html.er-mobile .mobile-identity small{font-size:13px} /* V3.4.115: four visible log lines plus category tabs. */ html.er-mobile .mobile-loot{height:104px!important;max-height:104px!important;overflow:hidden!important;display:flex!important;flex-direction:column;gap:4px} html.er-mobile .mobile-log-tabs{display:flex;flex:0 0 24px;gap:5px;align-items:stretch} html.er-mobile .mobile-log-tabs button{position:static!important;min-width:44px;padding:2px 8px;margin:0;border:1px solid #8f7b53;border-radius:3px;background:#172126;color:#dfd0aa;font-size:12px;line-height:18px;touch-action:manipulation} html.er-mobile .mobile-log-tabs button[aria-pressed=true]{background:#695436;color:#fff3cd;border-color:#d4ba7b} html.er-mobile .mobile-log-lines{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y} html.er-mobile .mobile-log-empty{font-size:11px;color:#bcaf92} html.er-mobile #er-combat-sound{bottom:calc(var(--mobile-dock) + var(--mobile-nav) + var(--mobile-safe) + 115px)!important;right:8px!important;z-index:60!important;pointer-events:auto!important;touch-action:manipulation;min-width:60px;min-height:26px} html.er-mobile #er-recovery-status{bottom:118px!important} /* V3.4.116: keep reconnect reachable even while the entry overlay is pending. */ html.er-mobile #gameScreen .mobile-reconnect:not([hidden]){position:fixed!important;display:block!important;top:calc(var(--mobile-top-safe) + var(--mobile-hud) + 8px)!important;left:max(12px,calc((100vw - 456px)/2))!important;right:max(12px,calc((100vw - 456px)/2))!important;width:auto!important;min-height:46px;z-index:2147483647!important;pointer-events:auto!important;touch-action:manipulation;visibility:visible!important;transform:none!important} html.er-mobile #gameScreen#gameScreen.er-entry-pending>.mobile-reconnect:not([hidden]){visibility:visible!important} .mobile-quantity-pad,.mobile-quantity-pad button{font-family:system-ui,'ClassicTC',sans-serif} html.er-mobile #gameScreen .mobile-ats{white-space:pre-line;line-height:1.2;font-size:17px;} #gameScreen #er-combat-sound{z-index:50000!important;pointer-events:auto!important;touch-action:manipulation;} html.er-mobile .mobile-run small{font-size:15px;line-height:1.35;display:block;white-space:normal;overflow-wrap:anywhere} html.er-mobile .mobile-location .mobile-find-npc{position:absolute;left:50%;transform:translateX(-50%);box-sizing:border-box;width:108px;min-width:108px;min-height:34px;white-space:nowrap} /* V158: reserve a complete text line, including native select borders. */ #gameScreen .er-ats-window select{box-sizing:border-box!important;height:40px!important;min-height:40px!important;padding:6px 8px!important;line-height:24px!important;font-size:16px!important;} #gameScreen .er-ats-picker{max-height:80%;overflow:auto;box-sizing:border-box;} #gameScreen .er-ats-choice-list{display:flex;flex-direction:column;gap:4px;max-height:55vh;overflow:auto;touch-action:pan-y;} #gameScreen .er-ats-choice{display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:46px;height:auto;padding:6px 10px;text-align:left;font:16px/24px sans-serif;} #gameScreen .er-ats-choice img{width:32px;height:32px;object-fit:contain;flex-shrink:0;} html.er-mobile #gameScreen>#er-active-effects{top:calc(var(--mobile-hud) + var(--mobile-top-safe) + 4px)!important;} html.er-mobile .mobile-xp{height:14px!important;} html.er-mobile .mobile-xp span{font-size:10px!important;line-height:12px!important;} #gameScreen .er-ats-window .er-ats-choice>span{display:block!important;position:static!important;width:auto!important;height:auto!important;visibility:visible!important;opacity:1!important;color:#ead9b1!important;font:16px/24px sans-serif!important;overflow:visible!important;} #gameScreen .er-ats-window .er-ats-choice>span{font-family:'ClassicTC',serif!important;} html.er-mobile .mobile-attribute-cards{grid-template-columns:1fr;} html.er-mobile .mobile-attribute-heading{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} html.er-mobile .mobile-attribute-heading>span{font-size:12px;color:#c7bdab;} html.er-mobile .mobile-attribute-heading>small{display:inline!important;font-size:10px;color:#a3b4bc;} #gameScreen .er-ats-window select{font-family:'ClassicTC',serif!important;} /* Put allocation controls on the same compact row as each attribute. */ html.er-mobile .mobile-attribute-card{grid-template-columns:minmax(0,1fr) 82px 30px;align-items:center;padding:4px 6px;gap:3px;} html.er-mobile .mobile-attribute-heading{grid-column:1;grid-row:1;gap:2px 6px;} html.er-mobile .mobile-attribute-card>.mobile-attribute-controls{grid-column:2;grid-row:1;gap:2px;} html.er-mobile .mobile-attribute-controls button{min-width:27px;min-height:27px;height:27px;} html.er-mobile .mobile-attribute-card>strong{grid-column:3;grid-row:1;text-align:right;font-size:18px;} /* V166 numeric thresholds are centered on desktop and phones. */ #gameScreen .er-ats-window input[type=number],#gameScreen .er-ats-window input[data-er-number]{text-align:center!important;text-indent:0!important;} /* V169 right-hand frequent-map category, with its own scrollable list. */ .er-map-tabs{display:flex!important;justify-content:flex-end;gap:6px;position:relative;z-index:5;padding:0 4px 6px;} .er-map-tabs button{padding:7px 12px;border:1px solid #a38d5c;background:#20272b;color:#e9d8b0;font:14px/20px 'ClassicTC',serif;min-height:36px;cursor:pointer;} .er-map-tabs button.active{background:#5a4b2e;border-color:#d3b873;} html.er-mobile .er3430-teleports:has(.er-map-tabs) .er3412-teleport-columns{height:calc(100% - 84px)!important;} .er-map-empty{font:14px/1.6 'ClassicTC',serif;color:#c8b995;} /* V170 recovery tools share three compact columns. */ #gameScreen .er-ats-window .er-ats-recovery{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:start;} #gameScreen .er-ats-window .er-ats-recovery>div{width:auto!important;min-width:0;} #gameScreen .er-ats-window .er-ats-recovery strong{font-size:14px;line-height:20px;text-align:center;white-space:nowrap;margin-bottom:4px;} html #gameScreen .er-ats-window .er-ats-recovery select{width:100%!important;max-width:100%!important;height:34px!important;min-height:34px!important;padding:3px 2px!important;font-size:14px!important;line-height:24px!important;margin:2px 0!important;} #gameScreen .er-ats-window .er-ats-recovery label{display:flex!important;align-items:center;gap:2px!important;flex-wrap:wrap;white-space:normal!important;font-size:12px!important;line-height:20px;margin:3px 0 7px!important;} html #gameScreen .er-ats-window .er-ats-recovery input[type=number]{width:32px!important;min-width:0!important;height:28px!important;font-size:14px!important;padding:2px!important;text-align:center!important;} /* Numeric fields reserve room for three digits; the in-game keypad replaces native steppers. */ html #gameScreen .er-ats-window input[type=number]{box-sizing:border-box!important;min-width:60px!important;width:4.6em!important;flex:0 0 auto!important;min-height:32px!important;height:32px!important;padding:3px 5px!important;line-height:24px!important;text-align:center!important;appearance:textfield!important;-moz-appearance:textfield!important;} html #gameScreen .er-ats-window input[type=number]::-webkit-inner-spin-button,html #gameScreen .er-ats-window input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important;} html #gameScreen .er-ats-window .er-ats-recovery input[type=number]{width:52px!important;min-width:52px!important;font-size:14px!important;} html #gameScreen .er-ats-window button.er-ats-icon-select{display:flex!important;align-items:center;gap:4px;width:100%!important;min-width:0;box-sizing:border-box;min-height:40px!important;height:auto!important;padding:4px!important;margin:2px 0!important;background:#151c19;color:#e9ddc2;border:1px solid #8c876f;border-radius:4px;font:14px/1.35 ClassicTC,serif;text-align:left;white-space:normal!important;} #gameScreen .er-ats-icon-select img{width:22px;height:26px;object-fit:contain;flex:0 0 22px;} #gameScreen .er-ats-icon-select span{min-width:0;flex:1;overflow-wrap:anywhere;} #gameScreen .er-ats-icon-select small{flex:none;font-size:14px;} /* selection-clarity-v3441.css */ /* Preserve the original class art; reduce oversized presentation and interpolation blur. */ #selectScreen .slot-art{ image-rendering:pixelated!important; filter:brightness(.86) saturate(1.22) contrast(1.05)!important; } #selectScreen .slot.selected .slot-art{ filter:brightness(1.01) saturate(1.22) contrast(1.05)!important; } html.er-mobile #selectScreen #slots{ min-height:240px!important;height:clamp(240px,30dvh,280px)!important;flex-shrink:0!important; } html.er-mobile #selectScreen .slot{ display:flex!important;align-items:flex-end!important;justify-content:center!important; padding:12px 4px!important;min-width:0;min-height:0!important;box-sizing:border-box;overflow:hidden!important; } html.er-mobile #selectScreen .slot-icon{ display:flex!important;align-items:flex-end!important;justify-content:center!important; position:relative!important;width:100%!important;height:100%!important;overflow:hidden!important; } html.er-mobile #selectScreen .slot-art{ position:static!important;inset:auto!important;display:block!important; width:auto!important;height:100%!important;max-height:220px!important;max-width:90%!important; margin:0!important;object-fit:contain!important;object-position:center bottom!important; flex:0 1 auto; } html.er-mobile #selectScreen .slot-info{display:none!important} #selectScreen .slot-selection-video{pointer-events:none;mix-blend-mode:screen;object-fit:contain;image-rendering:auto!important} /* The selection screen uses the same portrait width for every account/device. */ html.er-mobile #selectScreen .select-wrap{width:min(100%,480px)!important;max-width:480px!important;min-width:0!important;box-sizing:border-box!important;margin:0 auto!important;flex-shrink:0!important} html.er-mobile #selectScreen #slots{width:100%!important;min-height:210px!important;height:clamp(210px,28dvh,260px)!important;max-height:260px!important;gap:0!important;flex:0 0 auto!important} html.er-mobile #selectScreen .character-slot-wrap{height:100%!important;min-width:0!important;min-height:0!important;overflow:hidden!important} html.er-mobile #selectScreen .slot{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;overflow:hidden!important} html.er-mobile #selectScreen .slot-icon{min-height:0!important;max-height:100%!important} html.er-mobile #selectScreen .slot-art{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important} html.er-mobile #selectScreen .empty-slot-sword{width:72px!important;max-width:80%!important;height:150px!important;max-height:85%!important;aspect-ratio:auto!important;margin:0!important;flex:0 0 auto!important;mix-blend-mode:screen} #selectionClientVersion{display:block;color:#aa9b7c;font:11px/1.4 system-ui,sans-serif;text-align:center;letter-spacing:1px} /* remember-login.css */ /* V3.4.42 explicit remember-account control, shared by desktop and phone. */ #authScreen .remember-account{display:flex;align-items:center;gap:10px;margin:0 0 6px;min-height:38px;cursor:pointer;color:#dfc79f;font-size:15px} #authScreen .remember-account input{width:21px;height:21px;min-height:21px;margin:0;flex:0 0 21px;accent-color:#cba563;cursor:pointer} #authScreen .remember-account-hint{display:block;margin:0 0 14px;color:#a99d87;font-size:12px;line-height:1.4} /* spatial-client.css */ /* Feet are positioned in the same twelve-by-twelve arena on phones and desktops. */ #gameScreen .battlefield.er-spatial>.combatant,html.er-mobile #gameScreen .battlefield.er-spatial>.combatant{position:absolute!important;left:var(--world-x,12.5%)!important;top:var(--world-y,50%)!important;right:auto!important;bottom:auto!important;width:96px!important;height:110px!important;transform:translate(-50%,-100%)!important;transition:left var(--step-duration,0ms) linear,top var(--step-duration,0ms) linear!important;z-index:4!important} #gameScreen .battlefield.er-spatial #monsterGroup,html.er-mobile #gameScreen .battlefield.er-spatial #monsterGroup{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;pointer-events:none} #gameScreen .battlefield.er-spatial #monsterGroup .monster-card,html.er-mobile #gameScreen .battlefield.er-spatial #monsterGroup .monster-card{position:absolute!important;left:var(--world-x,89%)!important;top:var(--world-y,50%)!important;right:auto!important;bottom:auto!important;width:90px!important;height:100px!important;margin:0!important;transform:translate(-50%,-100%)!important;transition:left var(--step-duration,0ms) linear,top var(--step-duration,0ms) linear!important;pointer-events:auto} #gameScreen .battlefield.er-spatial .combatant[data-facing$=w] .er3414-form-canvas{scale:-1 1} #gameScreen .battlefield.er-spatial .monster-card[data-facing$=e] .monster-sprite{transform:scaleX(-1)} /* Correct the baked warm cast of Ivory Tower only; do not tint actors or UI. */ #gameScreen .er-map-backdrop[data-zone^="象牙塔"] img{filter:saturate(.35) hue-rotate(12deg) brightness(1.08)!important} #gameScreen .er-native-monster-walk{width:100%;height:100%;object-fit:contain;image-rendering:auto;pointer-events:none} #gameScreen .monster-sprite:has(.er-native-monster-walk){position:relative;overflow:visible} #gameScreen .monster-sprite>.er-native-monster-walk{position:absolute;left:50%;transform:translateX(-50%);max-width:none!important;max-height:none!important} /* Body size changes keep the feet anchored; labels and selection remain readable. */ #gameScreen .monster-sprite:has(.er-native-monster-walk){overflow:visible!important} html,body,#gameScreen,#gameScreen .game-wrap,#gameScreen .arena,#gameScreen .battlefield{touch-action:pan-x pan-y pinch-zoom!important} #er-recovery-status{position:absolute;left:8px;bottom:8px;z-index:15;color:#e4dab5;background:#111b;padding:3px 6px;font-size:11px;pointer-events:none} /* Cancel legacy artwork doubling. Screen-space measurements include mobile parent transforms. */ #gameScreen .battlefield .monster-card .monster-sprite{scale:1!important;zoom:1!important;transform-origin:center bottom!important;background-position:center bottom!important;background-repeat:no-repeat!important;overflow:visible!important} #gameScreen .battlefield .monster-sprite>.er-native-monster-walk{scale:1!important;zoom:1!important} html.er-mobile #gameScreen .mobile-resources{display:flex!important;flex-direction:column!important;gap:4px!important} html.er-mobile #gameScreen .mobile-resources>.mobile-meter{flex:1 1 0!important;min-height:10px!important} html.er-mobile #gameScreen .mobile-resources>.mobile-xp{position:relative!important;inset:auto!important;flex:0 0 10px!important;height:10px!important;min-height:10px!important;margin:0!important;width:100%!important;font-size:8px!important;line-height:10px!important} html.er-mobile #gameScreen .mobile-resources>.mobile-xp span{font-size:8px!important;line-height:10px!important} #er-combat-sound{position:absolute;right:8px;bottom:8px;z-index:16;font-size:11px;background:#171c20;color:#e3d5ad;border:1px solid #8f7b53;padding:3px 6px} /* Visual offsets keep MP at exactly the previous position. */ html.er-mobile #gameScreen .mobile-resources>.mobile-meter.hp{position:relative!important;top:-3px!important} html.er-mobile #gameScreen .mobile-resources>.mobile-xp{top:3px!important;bottom:auto!important} html.er-mobile #gameScreen .mobile-resources>.mobile-meter>span{position:absolute!important;inset:0!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;white-space:nowrap!important;font-size:10px!important;transform:none!important} /* A single foot anchor owns position; class and attack CSS cannot move the actor host. */ #gameScreen .battlefield.er-spatial #playerLabel{display:none!important} #gameScreen .battlefield.er-spatial>.combatant{scale:1!important;zoom:1!important;animation:none!important} #gameScreen .battlefield.er-spatial>.combatant #playerSprite{position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:0!important;width:96px!important;height:100px!important;margin:0!important;transform:translateX(-50%)!important;translate:none!important;scale:1!important;rotate:none!important;zoom:1!important;animation:none!important;transition:none!important;overflow:visible!important} #gameScreen .battlefield.er-spatial>.combatant #playerSprite>.er3414-form-canvas{position:absolute!important;left:50%!important;right:auto!important;top:auto!important;transform:translateX(-50%)!important;translate:none!important;scale:1!important;rotate:none!important;zoom:1!important;animation:none!important;transition:none!important;max-width:none!important;max-height:none!important} #gameScreen .battlefield.er-spatial>.combatant[data-facing$=w] #playerSprite{transform:translateX(-50%) scaleX(-1)!important} /* Native player bow/sword poses face left; native monster sequences face right. */ #gameScreen .battlefield.er-spatial>.combatant #playerSprite{transform:translateX(-50%)!important} #gameScreen .battlefield.er-spatial>.combatant[data-facing$=w] #playerSprite{transform:translateX(-50%)!important} #gameScreen .battlefield.er-spatial>.combatant[data-facing$=e] #playerSprite{transform:translateX(-50%) scaleX(-1)!important} #gameScreen .battlefield.er-spatial .monster-card .monster-sprite{transform:none!important} #gameScreen .battlefield.er-spatial .monster-card[data-facing$=w] .monster-sprite{transform:scaleX(-1)!important} #er-tile-coordinate{position:absolute;left:8px;bottom:29px;z-index:15;color:#e4dab5;background:#111b;padding:3px 6px;font-size:11px;pointer-events:none} /* V3.4.60: the bottom of this card IS the foot point. Labels never consume body height. */ #gameScreen .battlefield.er-spatial>.combatant, #gameScreen .battlefield.er-spatial #monsterGroup .monster-card, html.er-mobile #gameScreen .battlefield.er-spatial>.combatant, html.er-mobile #gameScreen .battlefield.er-spatial #monsterGroup .monster-card{transition:none!important;will-change:left,top} #gameScreen .battlefield.er-spatial #monsterGroup .monster-card{display:block!important;overflow:visible!important;padding:0!important;border:0!important;background:none!important} #gameScreen .battlefield.er-spatial .monster-card .monster-sprite, html.er-mobile #gameScreen .battlefield.er-spatial .monster-card .monster-sprite{position:absolute!important;left:50%!important;top:auto!important;bottom:0!important;width:90px!important;height:90px!important;max-height:none!important;margin:0!important;translate:-50% 0!important;scale:1!important;background:none!important} #gameScreen .battlefield.er-spatial .monster-card .unit-label, html.er-mobile #gameScreen .battlefield.er-spatial .monster-card .unit-label{position:absolute!important;left:50%!important;top:calc(100% + 3px)!important;bottom:auto!important;transform:translateX(-50%)!important;width:max-content!important;max-width:150px!important;height:14px!important;min-height:14px!important;margin:0!important;padding:0!important;line-height:14px!important;font-size:11px!important;white-space:nowrap!important;text-align:center!important} #gameScreen .battlefield.er-spatial .monster-card .monster-hp-track, html.er-mobile #gameScreen .battlefield.er-spatial .monster-card .monster-hp-track{position:absolute!important;left:50%!important;top:calc(100% + 18px)!important;bottom:auto!important;transform:translateX(-50%)!important;width:64px!important;height:5px!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important} #gameScreen .battlefield.er-spatial .monster-card .monster-hp-text{display:none!important} #gameScreen .battlefield.er-spatial .monster-card .er-native-monster-walk{position:absolute!important;left:50%!important;top:auto!important;transform:translateX(-50%)!important;max-width:none!important;max-height:none!important;pointer-events:none!important} /* Original SPRs already contain all eight headings: never mirror those images. */ #gameScreen .battlefield.er-spatial>.combatant[data-native-directions="true"] #playerSprite{transform:translateX(-50%)!important} #gameScreen .battlefield.er-spatial>.combatant[data-native-directions="true"] .er3414-form-canvas{scale:1!important} #gameScreen .battlefield.er-spatial .monster-card[data-native-directions="true"] .monster-sprite{transform:none!important} /* Labels track visible SPR pixels while the world foot anchor stays fixed. */ #gameScreen .battlefield.er-spatial .monster-card .unit-label, html.er-mobile #gameScreen .battlefield.er-spatial .monster-card .unit-label{top:calc(100% + 3px + var(--body-label-offset,0px))!important} #gameScreen .battlefield.er-spatial .monster-card .monster-hp-track, html.er-mobile #gameScreen .battlefield.er-spatial .monster-card .monster-hp-track{top:calc(100% + 18px + var(--body-label-offset,0px))!important} /* Classic spell targeting is an oval with a red center, separate from attack. */ #gameScreen .monster-card[data-monster-id],#gameScreen .monster-card[data-monster-id] *{cursor:url('/assets/cursors/attack-sword.svg') 3 2,pointer!important} body.er-spell-target #gameScreen .monster-card[data-monster-id],body.er-spell-target #gameScreen .monster-card[data-monster-id] *,body.er-spell-target #gameScreen .battlefield,body.er-spell-target #gameScreen .battlefield *{cursor:url('/assets/cursors/spell-oval.svg') 16 16,crosshair!important} #gameScreen .monster-card>.er-target-ring{display:none!important} #gameScreen .monster-card.er-selected-target{outline:none!important;box-shadow:none!important} .er-destroy-quantity-group{display:flex;gap:6px;align-items:center}.er-destroy-quantity-group input{flex:1;min-width:0}.er-destroy-quantity::-webkit-inner-spin-button,.er-destroy-quantity::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.er-destroy-quantity-group button{min-width:40px;min-height:40px} #gameScreen .battlefield.er-spatial #er-companion-layer .monster-card{position:absolute!important;left:var(--world-x,50%)!important;top:var(--world-y,50%)!important;right:auto!important;bottom:auto!important;width:90px!important;height:100px!important;margin:0!important;transform:translate(-50%,-100%)!important;pointer-events:auto;cursor:pointer;transition:none!important} #gameScreen #er-companion-layer .unit-label{color:#a9dfff!important} #gameScreen #er-companion-layer .er-companion-card,#gameScreen #er-companion-layer .er-companion-card *{cursor:pointer!important} .er33-choice>h3{position:static!important;margin:0 32px 12px 0!important;white-space:normal!important;overflow-wrap:anywhere;font-size:15px!important;line-height:1.5!important} .er33-choice>select,.er33-choice>.bag-action{position:static!important;max-width:100%!important;min-height:38px!important;margin:6px 0!important;font-size:14px!important} .er33-choice>.er-close-x{right:8px!important;top:8px!important;left:auto!important} #gameScreen #er-companion-layer .er-companion-card{touch-action:manipulation!important} #gameScreen #er-companion-layer .er-companion-card canvas,#gameScreen #er-companion-layer .er-companion-card .monster-sprite,#gameScreen #er-companion-layer .er-companion-card .unit-label{pointer-events:auto!important;touch-action:manipulation!important} /* The player's decorative actor must not swallow taps on a summon behind its padding. */ #gameScreen .battlefield>.combatant,#gameScreen .battlefield>.combatant *{pointer-events:none!important} /* Only the visible sprite frame and label receive taps, not the padded actor box. */ #gameScreen #er-companion-layer .er-companion-card,#gameScreen #er-companion-layer .er-companion-card .monster-sprite{pointer-events:none!important} #gameScreen #er-companion-layer .er-companion-card canvas,#gameScreen #er-companion-layer .er-companion-card .unit-label{pointer-events:auto!important} #er-companion-layer,#er-companion-layer *{-webkit-tap-highlight-color:transparent} .er33-choice>.er-close-x{width:32px!important;height:32px!important;font-size:22px!important;line-height:28px!important;padding:0!important} /* All three resource tracks share the available height. */ html.er-mobile #gameScreen .mobile-resources>.mobile-xp{flex:1 1 0!important;height:auto!important;min-height:14px!important;top:0!important;} html.er-mobile #gameScreen .mobile-resources>.mobile-meter{min-height:14px!important;top:0!important;} html.er-mobile #gameScreen .mobile-resources>.mobile-xp span{font-size:10px!important;line-height:1!important;position:absolute;inset:0;display:flex;align-items:center;} /* V160: sound control belongs to the battlefield, beneath every window. */ html #gameScreen #er-combat-sound{z-index:16!important;} #gameScreen:has(:is(#detailPanel,.zone-panel,.er18-window,.er-standard-window,.er-ats-window,.er33-shop,.er3411-dialog,.bag-modal,.mobile-sheet,.mobile-quantity-overlay,[role=dialog]):not([hidden])) #er-combat-sound{visibility:hidden!important;pointer-events:none!important;} /* Background training targets retain only their invisible interaction area. */ #gameScreen .er-background-training>.monster-sprite,#gameScreen .er-background-training>.unit-label,#gameScreen .er-background-training>.monster-hp-track,#gameScreen .er-background-training>.monster-hp-text{visibility:hidden!important;} #gameScreen .battlefield.er-spatial #monsterGroup .er-background-training{width:48px!important;height:90px!important;background:transparent!important;border:0!important;box-shadow:none!important;cursor:crosshair;} /* Separate large-world camera; legacy backgrounds and arenas retain their layout. */ #gameScreen .er-world-map .er-map-backdrop img{position:absolute!important;left:var(--world-image-left)!important;top:var(--world-image-top)!important;width:var(--world-image-width)!important;height:var(--world-image-height)!important;max-width:none!important;max-height:none!important;object-fit:fill!important;transform:none!important;image-rendering:auto;} #gameScreen .er-world-map .er-map-backdrop{background:#050505!important;} #er-peer-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;} .er-peer-actor{position:absolute;width:0;height:0;pointer-events:none;} .er-peer-actor canvas{position:absolute;max-width:none!important;max-height:none!important;opacity:.8;pointer-events:none;} .er-peer-actor small{position:absolute;top:5px;left:0;transform:translateX(-50%);white-space:nowrap;color:#aee8f5;font:12px/16px 'ClassicTC',serif;text-shadow:1px 1px 2px #000;} .er-peer-actor[data-cast=true] canvas{filter:brightness(1.5) drop-shadow(0 0 4px #b8d6ff);} #er-peer-toggle{position:absolute;left:8px;top:48px;z-index:1000;font:12px/18px 'ClassicTC',serif;padding:5px 8px;border:1px solid #9c875b;color:#e8d9b2;background:#171c20d9;} html.er-mobile #gameScreen.er-multiplayer-test .mobile-location>span{max-width:calc(50% - 70px);} /* V198 advanced ATS controls fit phone and desktop panels. */ .er-ats-window>nav{flex-wrap:wrap!important;}.er-ats-window>nav>button{min-width:64px;white-space:nowrap;}.er-ats-window .er-ats-body select{box-sizing:border-box;max-width:100%;}.er-ats-window .er-ats-body fieldset>fieldset{margin-top:10px;padding-bottom:12px;}.er-ats-window .er-ats-body fieldset>fieldset>button{float:none;display:inline-block;margin:4px 4px 4px 0;}.er-ats-window .er-ats-body label{white-space:normal;} /* Shared icon choices: native modal layer supports trade dialogs and touch. */ .er-icon-select{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:42px;padding:6px!important;color:#ead8ae;background:#202821;border:1px solid #94835b;font:inherit;text-align:left;box-sizing:border-box;}.er-icon-select img,.er-icon-option img{width:28px;height:30px;object-fit:contain;flex-shrink:0;}.er-icon-select span{flex:1;min-width:0;overflow-wrap:anywhere;}.er-icon-options{box-sizing:border-box;width:400px;max-width:94vw;max-height:86dvh;overflow:auto;padding:16px;background:#232a2e;color:#ead8ae;border:2px solid #b59b65;font:16px/1.5 ClassicTC,serif;}.er-icon-options::backdrop{background:#0008;}.er-icon-options input[type=search]{box-sizing:border-box;width:100%;min-height:42px;font:inherit;padding:6px;margin:12px 0;background:#111919;color:#ead8ae;border:1px solid #8a805e;}.er-icon-option-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}.er-icon-options button{min-height:44px;padding:8px;background:#30392e;border:1px solid #94835b;color:#ead8ae;font:inherit;}.er-icon-options .er-icon-option{display:flex;align-items:center;gap:10px;text-align:left;width:100%;box-sizing:border-box;}.er-icon-option[hidden]{display:none!important;}.er-icon-option span{overflow-wrap:anywhere;} /* V3.4.212 — approved emerald forest entry cover; scoped to login only. */ #authScreen.auth-forest{height:100vh;height:100dvh;min-height:100dvh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:28px;padding:44px 20px 28px;background-color:#061b22;background-image:linear-gradient(180deg,#04172010 0%,#03151d22 50%,#03131bc9 100%),url('/assets/login-forest-v34212/emerald-forest.png');background-size:cover;background-position:center 35%;background-attachment:fixed;scrollbar-color:#8a9f88 #0a2028;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;} #authScreen.auth-forest>*{flex-shrink:0;max-width:100%;} #authScreen.auth-forest .auth-forest-brand{text-align:center;color:#f1e6c8;width:540px;text-shadow:0 3px 4px #04131f,0 0 24px #04202f;} #authScreen.auth-forest .auth-forest-sigil{color:#bfffe2;font:32px/1 serif;text-shadow:0 0 18px #48efb2;} #authScreen.auth-forest .auth-forest-brand h1{font-family:ClassicTC,"Noto Serif TC","PMingLiU",serif;font-size:clamp(40px,6vw,66px);font-weight:700;letter-spacing:.13em;line-height:1.35;margin:6px 0 10px;color:#f3e9ce;} #authScreen.auth-forest .auth-forest-brand h1>span{display:block;font-size:.44em;letter-spacing:.16em;line-height:1.8;} #authScreen.auth-forest .auth-forest-brand .subtitle{margin:12px 0 0;color:#d7d6b7;font:12px/1.5 system-ui;letter-spacing:3px;} #authScreen.auth-forest .auth-card{position:relative;width:min(100%,500px);padding:28px 36px 22px;border:1px solid #c5c195;border-radius:12px 4px 12px 4px;background:linear-gradient(135deg,#123f47eb,#071c2beb 65%,#0a3038ed);box-shadow:0 18px 65px #0009,inset 0 0 0 4px #13303c,inset 0 0 0 5px #a9aa8066,0 0 32px #4ed9b521;text-align:center;} #authScreen.auth-forest .auth-card:before,#authScreen.auth-forest .auth-card:after{content:'❧';position:absolute;top:2px;color:#b5c79c;font:38px/1.2 serif;pointer-events:none;} #authScreen.auth-forest .auth-card:before{left:10px;}#authScreen.auth-forest .auth-card:after{right:10px;transform:scaleX(-1);} #authScreen.auth-forest #authTitle{margin:5px 0 8px;font:30px/1.5 ClassicTC,"PMingLiU",serif;letter-spacing:4px;color:#f2e6c6;} #authScreen.auth-forest .auth-forest-rule{display:flex;align-items:center;gap:14px;color:#adbd9b;margin:0 0 22px;font-size:13px;} #authScreen.auth-forest .auth-forest-rule:before,#authScreen.auth-forest .auth-forest-rule:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#a2b294,transparent);} #authScreen.auth-forest .auth-card label{font-size:14px;color:#e4dec1;margin:14px 0;text-align:left;} #authScreen.auth-forest .auth-card input:not([type=checkbox]){width:100%;min-height:48px;padding:12px 14px;margin-top:7px;background:#061824d9;color:#f4f0d8;border:1px solid #8da99e;border-radius:4px;font-size:16px;box-shadow:inset 0 2px 6px #0004;} #authScreen.auth-forest .auth-card input::placeholder{color:#aab9b8;opacity:1;} #authScreen.auth-forest .auth-card input:focus-visible,#authScreen.auth-forest .auth-card button:focus-visible{outline:2px solid #bdfad2;outline-offset:3px;} #authScreen.auth-forest .auth-card .remember-account{margin:10px 0 2px;font-size:14px;} #authScreen.auth-forest .remember-account input{accent-color:#61ca9f;} #authScreen.auth-forest .remember-account-hint{color:#b1c3ba;text-align:left;font-size:11px;margin-bottom:16px;} #authScreen.auth-forest .auth-card .full{min-height:48px;margin:14px 0 0;border:1px solid #b7bf9a;border-radius:7px 2px 7px 2px;font:18px/1.4 ClassicTC,"Microsoft JhengHei",serif;letter-spacing:2px;padding:12px 14px;} #authScreen.auth-forest .auth-card .gold{background:linear-gradient(110deg,#164e43,#137b60 50%,#164c48);color:#fff0ca;box-shadow:inset 0 0 0 3px #0c3a38,0 0 20px #54e5ad2b;text-shadow:0 1px 3px #042f29;} #authScreen.auth-forest .auth-card .ghost{background:linear-gradient(100deg,#172f3d,#203f4b,#122c3a);color:#f0ead1;box-shadow:inset 0 0 0 3px #0e2530;} #authScreen.auth-forest .auth-card button:hover{filter:brightness(1.12);}#authScreen.auth-forest .auth-card button:active{filter:brightness(.95);} #authScreen.auth-forest .auth-card .footnote{color:#b8c5b9;font-size:11px;line-height:1.5;margin:14px 0 0;} #authScreen.auth-forest .auth-legal{width:min(100%,740px);margin:0 auto;padding:18px 22px;background:#071d28e8;border:1px solid #8faaa0;border-radius:8px 2px 8px 2px;box-shadow:inset 0 0 0 4px #102b35b3,0 12px 24px #0004;color:#c8d6cd;text-align:left;font:12px/1.85 "Microsoft JhengHei",system-ui,sans-serif;overflow-wrap:anywhere;} #authScreen.auth-forest .auth-legal h2{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:1px;color:#f0ead1;} #authScreen.auth-forest .auth-legal p{margin:7px 0;}#authScreen.auth-forest .auth-legal strong{color:#e2e9d8;font-weight:600;}#authScreen.auth-forest .auth-contact{color:#f0e6c4;} html.er-mobile #authScreen.auth-forest{height:100dvh;min-height:100dvh;padding:24px 16px 24px;gap:22px;} html.er-mobile #authScreen.auth-forest .auth-card{padding:24px 24px 20px;width:min(100%,440px);} @media(max-width:420px){#authScreen.auth-forest{padding:24px 14px;gap:20px;}#authScreen.auth-forest .auth-card{padding:24px 22px 20px;}#authScreen.auth-forest .auth-legal{padding:14px 16px;font-size:11px;}#authScreen.auth-forest #authTitle{font-size:26px;}#authScreen.auth-forest .auth-forest-brand h1{font-size:40px;}} /* V3.4.213 — ATS sits above the chat tab; settings use the freed right edge. */ .mobile-ats{display:none;} html.er-mobile #gameScreen>.mobile-ats{display:block;position:absolute;z-index:20;width:56px;min-width:56px;height:56px;min-height:56px;padding:0;border:3px ridge #b99a64;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6e7158,#2d3335 65%);color:#ecd6ac;font:bold 17px/1.2 Georgia,serif;white-space:pre-line;box-shadow:0 0 0 2px #15191b;touch-action:manipulation;} html.er-mobile #gameScreen>.mobile-ats[data-running=true]{background:radial-gradient(circle at 35% 30%,#a64e3e,#4b1a19 65%);} html.er-mobile #gameScreen>.mobile-ats[hidden]{display:none!important;} html.er-mobile #gameScreen .mobile-run>.mobile-ats-settings{margin-left:auto;flex-shrink:0;} html.er-mobile #gameScreen .mobile-run{justify-content:space-between;} #gameScreen>.er3426-ats-status{width:clamp(29px,calc(var(--er3419-vw,1vw) * 4.8),70px);height:clamp(29px,calc(var(--er3419-vw,1vw) * 4.8),70px);} #gameScreen>.er3426-ats-status .er3426-ats-time{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);pointer-events:none;} html.er-mobile #gameScreen>.er3426-ats-status{display:none!important;} /* V3.4.214: scale the sound control and its text together, keeping its right/bottom anchor. */ #gameScreen #er-combat-sound{transform:scale(1.5);transform-origin:right bottom;} /* V3.4.216: actual encounter-pool maximum level, aligned at the right of travel rows. */ .er3412-teleport-group button.er-zone-has-level{display:flex;align-items:center;gap:8px;min-width:0;white-space:normal;text-align:left;} .er-zone-recommended{margin-left:auto;flex:0 0 auto;white-space:nowrap;color:#dbc493;font-size:.9em;} /* V3.4.217: original illustrated class portraits and clear sex selection. */ #createPanel[data-er-illustration=ready] #creationCharacterArt{visibility:hidden!important;opacity:0!important} #createPanel[data-er-illustration=ready] .lineage-character-stand{background:transparent!important} #createPanel[data-er-illustration=ready] .lineage-platform{visibility:hidden!important} #createPanel #creationClassIllustration{position:absolute!important;inset:0!important;transform:none!important;width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;object-fit:contain!important;object-position:center bottom!important;mix-blend-mode:normal!important;image-rendering:auto!important;clip-path:none!important;opacity:1!important;filter:none!important;pointer-events:none} #createPanel .lineage-sex-choices{gap:14px!important;align-items:center} #createPanel .lineage-sex{font-size:clamp(26px,4.3cqw,42px)!important;line-height:1.15!important;min-height:42px!important;padding:2px 12px!important;border:1px solid #766347!important;border-radius:5px!important;color:#bcb49f!important;cursor:pointer} #createPanel .lineage-sex[aria-pressed=true]{border-color:#f3ce7c!important;background:#504027!important;color:#fff1bc!important;box-shadow:0 0 0 1px #d3ae68,0 0 10px #d3ae6844!important} #createPanel .lineage-sex:focus-visible{outline:2px solid #fff1bc!important;outline-offset:3px} html.er-mobile #createPanel .lineage-character-stand{left:8%!important;width:84%!important} html.er-mobile #createPanel .lineage-center{height:294px!important} html.er-mobile #createPanel .lineage-sex-choices{height:46px!important;left:15%!important;right:15%!important} html.er-mobile #createPanel .lineage-sex{font-size:28px!important;min-height:44px!important;padding:2px 12px!important} #createPanel[data-er-illustration=ready] .lineage-character-stand{left:15%!important;width:70%!important;top:0!important;height:90%!important} #createPanel #creationClassIllustration{object-position:center center!important} html.er-mobile #createPanel[data-er-illustration=ready] .lineage-character-stand{left:8%!important;width:84%!important;top:0!important;height:195px!important} html.er-mobile #createPanel #creationClassIllustration{object-position:center bottom!important} /* V3.4.219: teleports are opened through the travel items. Legacy DOM stays inert for renderer compatibility. */ #gameScreen .zone-panel{display:none!important;pointer-events:none!important} #gameScreen .bottom-nav [data-standard-menu='地圖'],#gameScreen .mobile-nav [data-mobile-menu='地圖']{display:none!important} /* V3.4.220: explicit party invitations and persistent friend bookmarks. */ #gameScreen .er-standard-body form{display:grid;gap:10px;margin:12px 0 20px} #gameScreen .er-standard-body form label{display:grid;gap:6px} #gameScreen .er-standard-body input[data-social-name]{box-sizing:border-box;width:100%;min-height:42px;border:1px solid #a38a5d;background:#101a1b;color:#eee0b7;padding:8px 10px;font:inherit;touch-action:manipulation} #gameScreen .er-standard-body button:disabled{opacity:.45;cursor:default} .er-world-board .er-world-controls{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px} .er-world-board .er-world-controls button{min-height:42px;margin:0!important;padding:8px 12px!important} .er-world-board .er-world-controls button[aria-pressed=true]{background:#5b4b2d!important;border-color:#d5bc77!important} .er-world-disclosure{font-size:13px;line-height:1.7;color:#c6b990;white-space:normal} .er-world-rank{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px} .er-world-rank th,.er-world-rank td{padding:11px 5px;border-bottom:1px solid #75684966;text-align:left;vertical-align:middle;overflow-wrap:anywhere} .er-world-rank th:first-child,.er-world-rank td:first-child{width:40px;text-align:center} .er-world-rank th:last-child,.er-world-rank td:last-child{width:100px;text-align:right;font-variant-numeric:tabular-nums} .er-world-rank td small{display:block;margin-top:4px;color:#b7ab8f;font-size:11px} .er-world-event{padding:12px 4px;border-bottom:1px solid #75684966} .er-world-event small{color:#b7ab8f;font-size:12px} .er-world-event p{margin:7px 0;line-height:1.7;overflow-wrap:anywhere} /* Keep real monster artwork visible until a non-empty animation frame is painted. */ #gameScreen .battlefield.er-spatial .monster-card .monster-sprite>img.er-monster-fallback{display:block!important;position:absolute!important;left:50%!important;top:auto!important;bottom:0!important;transform:translateX(-50%)!important;width:auto!important;height:var(--fallback-body-height,80px)!important;max-width:none!important;max-height:none!important;object-fit:contain!important;opacity:1!important;visibility:visible!important;pointer-events:none!important} #gameScreen .battlefield.er-spatial .monster-card .monster-sprite>img.er-monster-fallback[hidden]{display:none!important} /* Six ATS pages keep supply and sale side by side on narrow screens. */ html.er-mobile .er-ats-window>nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px!important} html.er-mobile .er-ats-window>nav>button{min-width:0!important;min-height:36px} .er-ats-sell-rule select{width:100%;margin-bottom:8px!important} .er-ats-sell-rule label{margin:10px 0!important} .er-ats-sell-rule button{min-height:36px;margin-top:8px!important} /* V3.4.229: aligned display controls, shared by phone and the classic 4:3 view. */ #gameScreen .er-standard-body.er-display-settings{box-sizing:border-box;align-items:stretch!important;gap:12px!important;min-width:0;} #gameScreen .er-display-settings>.er-display-option{display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;align-items:center!important;justify-content:start!important;gap:12px!important;width:100%!important;min-height:44px!important;padding:6px 4px!important;margin:0!important;box-sizing:border-box;text-align:left!important;} #gameScreen .er-display-option>input[type=checkbox]{position:static!important;display:block!important;width:20px!important;min-width:20px!important;max-width:20px!important;height:20px!important;min-height:20px!important;margin:0!important;padding:0!important;transform:none!important;justify-self:start;} #gameScreen .er-display-option>span{display:block;min-width:0;width:auto!important;text-align:left!important;line-height:1.5;overflow-wrap:break-word;} #gameScreen .er-display-settings>.er-display-layout-toggle{width:100%!important;min-height:44px!important;margin:4px 0 0!important;padding:10px!important;font:inherit!important;white-space:normal!important;} #gameScreen .er-display-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 0;width:100%;} #gameScreen .er-display-actions>button{min-width:0!important;min-height:44px!important;padding:8px!important;font:inherit!important;white-space:normal!important;} html:not(.er-mobile) #gameScreen>.mobile-reconnect,html:not(.er-mobile) .mobile-portrait-notice{display:none!important;} html:not(.er-mobile) #gameScreen .er-standard-body.er-display-settings{font-size:clamp(12px,calc(10 * var(--er33-u)),20px)!important;} /* V3.4.230: compact inventory → sale transfer lists, shared by touch and desktop. */ #gameScreen .er-ats-sell-transfer{min-width:0!important;padding:8px!important;margin:0!important;} #gameScreen .er-sell-toolbar{display:flex;align-items:center;gap:8px;margin:0 0 8px;flex-wrap:wrap;} #gameScreen .er-sell-toolbar>label{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;margin:0 auto 0 0!important;} #gameScreen .er-sell-toolbar input[type=checkbox]{width:18px!important;min-width:18px!important;height:18px!important;margin:0!important;} #gameScreen .er-sell-toolbar>button{min-width:0!important;min-height:34px!important;padding:4px 9px!important;margin:0!important;font:inherit!important;} #gameScreen .er-sell-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;} #gameScreen .er-sell-columns>section{min-width:0;} #gameScreen .er-sell-columns>section>strong{display:block;margin:0 0 5px;font-size:12px;} #gameScreen .er-sell-list{height:clamp(150px,29dvh,240px);overflow-y:auto;overflow-x:hidden;background:#141a19;border:1px solid #867653;min-width:0;scrollbar-width:thin;} #gameScreen .er-sell-list>p{font-size:12px;margin:8px!important;line-height:1.5;} #gameScreen .er-sell-list>.er-sell-item{display:flex!important;align-items:center;gap:5px;width:100%!important;min-width:0!important;min-height:47px!important;margin:0!important;padding:5px!important;border:0!important;border-bottom:1px solid #42473c!important;border-radius:0!important;background:transparent!important;text-align:left!important;box-sizing:border-box;white-space:normal!important;} #gameScreen .er-sell-item.selected{background:#4c5037!important;box-shadow:inset 3px 0 #d5bf7b!important;} #gameScreen .er-sell-item:focus-visible{outline:2px solid #d5bf7b!important;outline-offset:-2px;} #gameScreen .er-sell-item>img{width:23px!important;height:23px!important;min-width:23px;object-fit:contain;flex-shrink:0;} #gameScreen .er-sell-item-text{min-width:0;display:block;flex:1;} #gameScreen .er-sell-item-name{display:block!important;font-size:12px!important;line-height:1.3!important;overflow-wrap:anywhere;} #gameScreen .er-sell-item small{display:block!important;margin:3px 0 0!important;font-size:10px!important;line-height:1.25!important;opacity:.85;overflow-wrap:anywhere;} #gameScreen .er-sell-editor{min-height:42px;margin-top:8px;} #gameScreen .er-sell-editor>label{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;flex-wrap:wrap;margin:0!important;font-size:12px;} #gameScreen .er-sell-editor input[type=number]{width:72px!important;min-width:0!important;max-width:100%;height:32px!important;min-height:32px!important;margin:0!important;box-sizing:border-box;} #gameScreen .er-sell-editor>small,#gameScreen .er-sell-hint{display:block;font-size:11px!important;line-height:1.5!important;margin:3px 0 0!important;} /* Supply uses compact rows, independently from the sale transfer lists. */ #gameScreen .er-ats-supply-compact{min-width:0!important;padding:8px!important;margin:0!important;} #gameScreen .er-supply-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:8px;} #gameScreen .er-supply-toolbar>label{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;justify-content:flex-start!important;} #gameScreen .er-supply-toolbar input[type=checkbox]{width:18px!important;min-width:18px!important;height:18px!important;margin:0!important;} #gameScreen .er-supply-toolbar>button{margin:0 0 0 auto!important;min-height:34px!important;padding:4px 10px!important;font:inherit!important;} #gameScreen .er-ats-supply-compact>p,#gameScreen .er-ats-supply-compact>small{font-size:11px!important;line-height:1.5!important;margin:5px 0!important;} #gameScreen .er-supply-list{min-width:0;} #gameScreen .er-supply-row{border-bottom:1px solid #716b55;padding:5px 0 8px;margin:0 0 4px;min-width:0;} #gameScreen .er-supply-head{display:flex;align-items:center;gap:8px;min-width:0;} #gameScreen .er-supply-head>.er-supply-item{display:flex!important;align-items:center!important;gap:8px;width:auto!important;min-width:0!important;min-height:39px!important;flex:1;text-align:left!important;background:transparent!important;border:0!important;padding:2px!important;margin:0!important;} #gameScreen .er-supply-item>img{width:26px!important;height:26px!important;object-fit:contain;flex-shrink:0;} #gameScreen .er-supply-item>span{min-width:0;} #gameScreen .er-supply-item strong{display:block;font:inherit!important;overflow-wrap:anywhere;} #gameScreen .er-supply-item small{display:block;font-size:11px!important;line-height:1.3;margin-top:2px;color:#cec2a0;} #gameScreen .er-supply-head>.er-supply-remove{min-width:44px!important;min-height:34px!important;padding:3px 6px!important;margin:0!important;font-size:12px!important;flex-shrink:0;} #gameScreen .er-supply-counts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px;} #gameScreen .er-supply-counts>label{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;margin:0!important;font-size:12px!important;} #gameScreen .er-supply-counts input[type=number]{width:60px!important;min-width:0!important;height:30px!important;min-height:30px!important;margin:0!important;padding:2px 4px!important;box-sizing:border-box;} /* Center the transfer actions; Add occupies the space just left of the midpoint. */ #gameScreen .er-sell-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);column-gap:8px;} #gameScreen .er-sell-toolbar>label{grid-column:1;min-width:0;margin:0!important;} #gameScreen .er-sell-toolbar>.er-sell-add{grid-column:2;} #gameScreen .er-sell-toolbar>.er-sell-remove{grid-column:3;} #er-ats-supply-confirm{box-sizing:border-box;max-height:88dvh;overflow:auto;} #er-ats-supply-confirm>p{line-height:1.5;margin:10px 0;} #er-ats-supply-confirm>small{display:block;line-height:1.5;} .er-supply-cost-list{max-height:30dvh;overflow:auto;padding:0 8px;border:1px solid #82734e;} .er-supply-cost-list>p{margin:7px 0;line-height:1.5;} .er-supply-cost-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px;} .er-supply-cost-actions>button{min-height:44px;padding:8px 12px;font:inherit;} /* Desktop NPC entry stays in the middle, clear of the right-side status rail. */ html:not(.er-mobile) #gameScreen .arena>.er44-npc-menu-button{left:50%!important;right:auto!important;top:12px!important;transform:translateX(-50%)!important;min-width:88px;min-height:34px;padding:6px 12px;box-sizing:border-box;white-space:nowrap;} html:not(.er-mobile) #gameScreen .er-message-tabs{display:flex;flex:0 0 26px;gap:5px;margin:0 0 3px;min-width:0;} #gameScreen .er-message-tabs>button{flex:1;min-width:0!important;min-height:26px!important;padding:2px 4px!important;font-size:clamp(10px,calc(var(--er3419-vw,1vw) * 1),14px)!important;line-height:18px!important;border:1px solid #8f7b53;background:#172126;color:#dfd0aa;border-radius:3px;white-space:nowrap;} #gameScreen .er-message-tabs>button[aria-pressed=true]{background:#695436;color:#fff3cd;border-color:#d4ba7b;} html.er-mobile .er-message-tabs{display:none;} /* Desktop controls share the same ATS panel and server actions as mobile. */ #gameScreen>.er-desktop-tools{position:absolute;right:12px;bottom:calc(var(--er-hud-height,160px) + 18px);z-index:150;display:flex;gap:10px;flex-wrap:wrap;max-width:calc(100% - 24px);justify-content:flex-end;pointer-events:auto;} #gameScreen>.er-desktop-tools>button{min-height:36px;padding:6px 12px;border:1px solid #b9a06b;background:#242b2eee;color:#f1dfb3;font:14px ClassicTC,'Microsoft JhengHei',sans-serif;cursor:pointer;} html.er-mobile #gameScreen>.er-desktop-tools{display:none!important;} /* Add exactly two CSS pixels to the existing desktop HUD text. */ html:not(.er-mobile) #gameScreen #er19-level,html:not(.er-mobile) #gameScreen #er19-exp,html:not(.er-mobile) #gameScreen .er19-cell span,html:not(.er-mobile) #gameScreen .er19-law>b{font-size:calc(clamp(8px,calc(var(--er3419-vw,1vw) * 1.03),16px) + 2px)!important;} html:not(.er-mobile) #gameScreen .er19-head{padding-left:12px!important;padding-right:14px!important;} html:not(.er-mobile) #gameScreen .er19-cell span{right:12%!important;} html:not(.er-mobile) #gameScreen .er19-law>b{left:60%!important;right:12%!important;} /* Keep actual monster art visible when the legacy desktop renderer uses background URLs. */ #gameScreen .battlefield.er-spatial .monster-sprite>.er-native-monster-walk{display:block!important;visibility:visible!important;opacity:1!important;} html:not(.er-mobile) #gameScreen .battlefield.er-spatial .monster-card .monster-hp-text{display:block!important;position:absolute!important;left:50%!important;top:calc(100% + 26px + var(--body-label-offset,0px))!important;transform:translateX(-50%)!important;margin:0!important;font:12px/14px ClassicTC,sans-serif!important;color:#fff4da!important;text-shadow:1px 1px #000;white-space:nowrap;} /* Returning from desktop must not retain its fixed viewport coordinates. */ html.er-mobile #gameScreen #detailPanel:not([hidden]),html.er-mobile #gameScreen .zone-panel:not([hidden]),html.er-mobile #gameScreen .er18-window,html.er-mobile #gameScreen .er-standard-window,html.er-mobile #gameScreen .er-ats-window,html.er-mobile #gameScreen .er33-shop,html.er-mobile #gameScreen .er3411-dialog,html.er-mobile #gameScreen .bag-modal,html.er-mobile #gameScreen .mobile-sheet{position:absolute!important;left:4px!important;right:4px!important;width:calc(100% - 8px)!important;max-width:calc(100% - 8px)!important;min-width:0!important;margin-left:0!important;margin-right:0!important;transform:none!important;box-sizing:border-box!important;} /* Fit the training artwork and its fixed interaction anchors at one scale. */ #gameScreen .er-map-backdrop[data-zone="新人修練場"]{background:#76624b!important;} #gameScreen .er-map-backdrop[data-zone="新人修練場"] img{object-fit:contain!important;object-position:50% 50%!important;transform:none!important;} /* Announcements must show the awarded item, even on the narrow log rail. */ #gameScreen .er-drop-message,#gameScreen .er24-line,html.er-mobile #gameScreen .mobile-work-line.er-drop-message{height:auto!important;min-height:16px!important;max-height:none!important;white-space:pre-wrap!important;overflow:visible!important;overflow-wrap:anywhere!important;word-break:normal!important;text-overflow:clip!important;line-height:1.5!important;} #gameScreen .er-drop-actor,.er-world-event .er-drop-actor{color:#8edcff!important;font-weight:700;} #gameScreen .er-drop-item,.er-world-event .er-drop-item{color:#ffd36a!important;font-weight:700;} /* Melee elf art uses the original weapon-specific frames at the existing foot anchor. */ #gameScreen #playerSprite[data-elf-melee="true"]>:not(.er-elf-melee-canvas){visibility:hidden!important;} #gameScreen #playerSprite>.er-elf-melee-canvas{display:block!important;visibility:visible!important;position:absolute!important;max-width:none!important;max-height:none!important;transform:none!important;translate:none!important;scale:1!important;animation:none!important;pointer-events:none!important;image-rendering:auto;} #gameScreen.er-elf-melee #projectile{display:none!important;} /* V3.4.237 announcement monsters share the drop inspector, including world events. */ #gameScreen .er-announcement-monster,.er-world-event .er-announcement-monster{display:inline!important;position:static!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:inherit!important;font:inherit!important;line-height:inherit!important;text-decoration:underline!important;text-underline-offset:2px;white-space:normal!important;vertical-align:baseline;cursor:pointer;} /* Fill the desktop menu row, clipping old sheet edges outside its frame. */ html:not(.er-mobile) #gameScreen .bottom-nav{overflow:hidden!important;border-bottom:0!important;} html:not(.er-mobile) #gameScreen .bottom-nav button.er-classic-menu{bottom:0!important;box-sizing:border-box!important;margin:0!important;border-radius:0!important;overflow:hidden!important;background-repeat:no-repeat!important;} html:not(.er-mobile) #gameScreen .bottom-nav button.er-classic-menu:focus:not(:focus-visible){outline:none!important;} html:not(.er-mobile) #gameScreen>.mobile-sheet:has(.mobile-monster-drops){position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(480px,90%)!important;max-height:80%!important;overflow:auto!important;z-index:40000!important;padding:14px!important;background:#22292d!important;color:#e5d5b0!important;border:1px solid #b6a074!important;box-sizing:border-box!important;} html:not(.er-mobile) #gameScreen>.mobile-sheet:has(.mobile-monster-drops)>header{display:flex;justify-content:space-between;align-items:center;gap:12px;} html:not(.er-mobile) #gameScreen>.mobile-sheet:has(.mobile-monster-drops)>header h2{font-size:18px;margin:0 0 12px;} #gameScreen .battlefield.er-spatial>.combatant #playerSprite[data-elf-melee="true"]{background-image:none!important;transform:translateX(-50%)!important;animation:none!important;} /* Monster names remain inspectable in both layouts. */ .monster-card .unit-label{pointer-events:auto!important;cursor:pointer;text-decoration:underline;text-underline-offset:2px} /* Shared desktop/mobile bidirectional drop search. */ #gameScreen>.er-drop-search-panel{display:flex!important;flex-direction:column!important;overflow:hidden!important;max-height:80%!important;} .er-drop-search-panel>header{flex-shrink:0}.er-drop-search-panel>header h2{flex:1} .er-drop-search{overflow:auto;min-height:0;flex:1;touch-action:pan-y} .er-drop-search button{color:#eddbb2;background:#283034;border:1px solid #97845c;padding:8px 12px;cursor:pointer;font:inherit;border-radius:3px;min-height:36px;} .er-drop-search-panel>header button{color:#eddbb2;background:#283034;border:1px solid #97845c;padding:6px 10px;cursor:pointer;} .er-drop-search-panel button:disabled{opacity:.4;cursor:default} .er-lookup-tabs{display:flex;gap:10px;margin:0 0 12px}.er-lookup-tabs button{flex:1}.er-lookup-tabs [aria-pressed=true]{background:#605334;border-color:#dcc28c} .er-lookup-form{display:flex;gap:8px;margin-bottom:12px}.er-lookup-form input{min-width:0;width:0;flex:1;box-sizing:border-box;background:#161e22;color:#f5e8c8;border:1px solid #a38e65;padding:8px;font:inherit;font-size:16px;} .er-lookup-section{margin:12px 0;border-top:1px solid #78694e}.er-lookup-section h3{display:flex;align-items:center;gap:6px;font-size:17px;margin:10px 0;} .er-lookup-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;border-bottom:1px solid #77684c55;padding:9px 0;font-size:14px;} .er-lookup-row b{color:#f4d68e;font-variant-numeric:tabular-nums}.er-lookup-row>span{font-size:12px;color:#c8bfa9;white-space:nowrap} .er-drop-search .er-lookup-link{border:0;background:none;padding:2px 0;min-height:28px;text-decoration:underline;text-underline-offset:3px;text-align:left;overflow-wrap:anywhere;} .er-lookup-region{display:block;color:#bdb298;font-size:12px;margin:3px 0;overflow-wrap:anywhere}.er-lookup-item{display:flex;align-items:center;gap:6px;min-width:0}.er-lookup-icon{display:inline-flex;flex-shrink:0;width:28px;height:28px;align-items:center;justify-content:center}.er-lookup-icon img{max-width:28px;max-height:28px;object-fit:contain}.er-lookup-pages{display:flex;gap:10px;align-items:center;justify-content:center;margin:16px 0}.er-lookup-count{font-size:13px;color:#bbaf96;} /* Independent hunters and their own enemies in the Gludio multiplayer test. */ .er-peer-actor.er-demo-monster small{color:#ece5ce!important;top:6px}.er-demo-hp{position:absolute;top:23px;left:-22px;width:44px;height:3px;background:#25201b;border:1px solid #29231d}.er-demo-hp i{display:block;height:100%;background:#b94d43}.er-demo-hit{position:absolute;left:-10px;top:-70px;color:#f8e6ba;font:bold 17px serif;text-shadow:1px 1px 2px #000;animation:er-demo-hit .85s ease-out forwards;pointer-events:none}@keyframes er-demo-hit{to{transform:translateY(-26px);opacity:0}} .er-peer-fallback{position:absolute;left:0;bottom:0;transform:translateX(-50%);height:65px;max-width:110px;object-fit:contain;pointer-events:none}.er-demo-bolt{position:absolute;width:15px;height:2px;background:#e9d7ac;box-shadow:0 0 2px #342515;transform-origin:center;pointer-events:none}.er-demo-bolt:after{content:'';position:absolute;right:-3px;top:-2px;border-left:5px solid #ede6d0;border-top:3px solid transparent;border-bottom:3px solid transparent}.er-demo-bolt.er-demo-magic{width:7px;height:7px;border-radius:50%;background:#c1e6ff;box-shadow:0 0 8px 3px #68b9ff}.er-demo-bolt.er-demo-magic:after{display:none}.er-demo-bolt[hidden]{display:none!important} /* Inventory insertion drop marker; hover descriptions must not intercept a held item. */ #detailPanel .bag-tile.mobile-drop-target{box-shadow:inset 4px 0 #ffdb69!important;outline:2px solid #ffdb69!important;outline-offset:-2px} body.er-mobile-shortcut-drag #er-item-tooltip,body.er-mobile-shortcut-drag #er-item-tooltip *{pointer-events:none!important} /* V339: persistent shortcut selection is independent of browser focus. */ html.er-mobile .mobile-quick [data-mobile-quick-slot][aria-pressed="true"]::after{content:"";position:absolute;inset:1px;border:2px solid #ffe39a;border-radius:2px;box-shadow:0 0 4px #eac16c,inset 0 0 4px #eac16c55;pointer-events:none;z-index:3}