/* RuneScape Survivor. All chrome is original cache sprites, set as CSS variables at boot
   (see ui/chrome.js). Text colours are the OSRS client's own constants. */
@font-face{font-family:RS;src:url('../assets/osrs/fonts/RuneScape-Plain-12.ttf')}
@font-face{font-family:RSSmall;src:url('../assets/osrs/fonts/RuneScape-Plain-11.ttf')}
@font-face{font-family:RSBold;src:url('../assets/osrs/fonts/RuneScape-Bold-12.ttf')}
:root{
  --orange:#ff981f; --yellow:#ffff00; --white:#ffffff; --green:#00ff00; --dkgreen:#0dc10d; --red:#ff0000; --cyan:#00ffff; --blue:#0000ff; --dkred:#800000;
  --black:#000000; --brown:#3e3529; --brown-2:#2b2318; --brown-3:#5a5245; --parch:#d8c69d; --gold:#ffb83f; --shadow:1px 1px 0 #000;
  --stone:none; --stone-tile:none; --trade:none; --trade-dark:none; --side-bg:none; --chat-bg:none; --button:none; --button-large:none; --button-wide:none; --titlebox:none; --title-bg:none;
}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--white)}
body{font:16px/1.15 RS,'Times New Roman',serif;-webkit-font-smoothing:none;font-smooth:never;text-rendering:optimizeSpeed;user-select:none}
img{image-rendering:pixelated} button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--yellow);outline-offset:1px}
[hidden]{display:none!important}
.b{font-family:RSBold,RS,serif} .s{font-family:RSSmall,RS,serif;font-size:14px}
.or{color:var(--orange)} .ye{color:var(--yellow)} .gr{color:var(--green)} .re{color:var(--red)} .cy{color:var(--cyan)} .wh{color:var(--white)} .dg{color:var(--dkgreen)}
.sh{text-shadow:var(--shadow)}
.fine{font-size:14px;color:#b7a98f}

#app{position:fixed;inset:0}
#world,#overlay{position:absolute;inset:0;width:100%;height:100%;display:block}
#world{outline:none;touch-action:none}
#overlay{pointer-events:none}
#hud,#screens{position:absolute;inset:0;pointer-events:none}
#hud *,#screens>*{pointer-events:auto}
#hud .pass,#hud .pass *{pointer-events:none}

/* ----- stone interface windows (OSRS v2 stone borders over tradebacking) ----- */
.win{position:relative;border:32px solid transparent;border-image:var(--stone) 32 fill / 32px / 0 round;image-rendering:pixelated;color:var(--orange);text-shadow:var(--shadow);margin:-18px}
.win>.inner{position:relative;margin:-18px;padding:6px 8px}
.win h2{margin:0 0 6px;font:16px RSBold;color:var(--orange);text-align:center;letter-spacing:0}
.win .close{position:absolute;right:-12px;top:-14px;width:26px;height:23px;background:var(--close) center/contain no-repeat;image-rendering:pixelated}
.win .close:hover{background-image:var(--close-h)}
.divider{height:2px;background:#000;border-bottom:1px solid #5d5240;margin:6px 0}
.box{background:var(--trade-dark);border:1px solid #000;box-shadow:inset 0 0 0 1px #4d4535;padding:4px}

/* Stone buttons (the client's v2 stone button is a 9-slice of 9×9 pieces). */
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:3px 12px;color:var(--orange);text-shadow:var(--shadow);
  border:9px solid transparent;border-image:var(--sbtn) 9 fill / 9px round;margin:-4px;font-family:RS}
.sbtn:hover{color:var(--white)} .sbtn.on{color:var(--white);border-image-source:var(--sbtn-on)}
.sbtn:disabled{color:#7f7a6c;cursor:default}
.sbtn img{max-height:26px}
.tbtn{width:147px;height:41px;background:var(--button) center/100% 100% no-repeat;color:var(--white);font:16px RSBold;text-shadow:var(--shadow)}
.tbtn:hover{filter:brightness(1.18)} .tbtn.large{width:218px;height:68px;background-image:var(--button-large);font-size:22px}
.tbtn.big{width:220px;height:56px;font-size:22px}
.flip{display:inline-block;transform:scaleX(-1)}
.tbtn.wide{width:286px;height:40px;background-image:var(--button-wide)}

/* ----- loading (the client's red loading bar) ----- */
.loading{position:absolute;inset:0;display:grid;place-items:center;background:#000;z-index:20}
.load-box{text-align:center} #load-title{font:16px RSBold;color:var(--white);margin:0 0 10px}
.load-bar{position:relative;width:304px;height:34px;border:1px solid #8c1111;background:#000;margin:auto}
#load-fill{position:absolute;inset:1px auto 1px 1px;width:0;background:#8c1111;transition:width .2s}
#load-text{position:absolute;inset:0;display:grid;place-items:center;font:16px RSBold;color:#fff}

/* ----- title screen ----- */
.title{position:absolute;inset:0;display:grid;place-items:center;background:#000}
.title .bg{position:relative;width:765px;height:503px;transform-origin:center;background:var(--title-bg) left top/383px 503px no-repeat}
.title .bg::after{content:'';position:absolute;left:382px;top:0;width:383px;height:503px;background:var(--title-bg) 0 0/383px 503px no-repeat;transform:scaleX(-1)}
.title .logo{position:absolute;left:161px;top:22px;z-index:1}
.title .tbox{position:absolute;left:202px;top:171px;width:360px;height:200px;background:var(--titlebox) 0 0/100% 100%;z-index:1;text-align:center;padding-top:24px}
.title .tbox p{margin:0 0 6px;color:var(--yellow);font:16px RSBold;text-shadow:var(--shadow)}
.title .tbox .sm{font:16px RS;color:var(--white)}
.title .tbox .row{display:flex;justify-content:center;gap:24px;margin-top:22px}
.title .legal{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:14px RSSmall;color:#ffffff;z-index:1;text-shadow:var(--shadow)}
.title .mute{position:absolute;right:8px;bottom:8px;z-index:2;width:40px;height:40px;background:var(--mute) center/contain no-repeat}

/* ----- client chrome: minimap, orbs, side panel, chatbox ----- */
.mini{position:absolute;top:0;right:0;width:249px;height:172px}
.mini .frame{position:absolute;right:0;top:0;width:172px;height:156px;background:var(--mapback) 0 0/100% 100%;z-index:2;pointer-events:none}
.mini canvas{position:absolute;right:13px;top:5px;width:146px;height:146px;border-radius:50%;z-index:1}
.mini .compass{position:absolute;right:136px;top:2px;width:33px;height:33px;z-index:3;border-radius:50%}
.mini .coords{position:absolute;right:30px;top:154px;font:12px RSSmall;color:var(--yellow);text-shadow:var(--shadow);z-index:3}
.orb{position:absolute;width:57px;height:34px;background:var(--orb-frame) 0 0/100% 100% no-repeat;z-index:3;cursor:pointer}
.orb .fill{position:absolute;left:27px;top:4px;width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--orb-empty) 0 0/26px 26px}
.orb .fill i{position:absolute;inset:0;background:var(--f) 0 0/26px 26px;clip-path:inset(var(--cut,0%) 0 0 0)}
.orb .ic{position:absolute;left:27px;top:4px;width:26px;height:26px;background:var(--ic) center/26px 26px no-repeat}
.orb b{position:absolute;left:0;top:13px;width:27px;text-align:center;font:12px RSSmall;color:var(--green);text-shadow:var(--shadow)}

.side{position:absolute;right:0;bottom:0;width:241px;display:flex;flex-direction:column}
.side .tabs{display:flex;justify-content:center;flex-wrap:wrap;width:241px;background:var(--stone-tile);border:1px solid #000}
.side .tab{position:relative;width:33px;height:36px;background:none center/contain no-repeat}
.side .tab.on{background-image:var(--tab-on)}
.side .tab img{position:absolute;left:0;top:0;width:33px;height:36px}
.side .panel{position:relative;width:241px;height:290px;background:var(--side-bg) 0 0/100% 100%;border:1px solid #000;padding:10px 12px;overflow:auto;color:var(--orange);text-shadow:var(--shadow);scrollbar-width:thin;scrollbar-color:#5a4a33 #2a2117}
.panel h3{margin:0 0 6px;font:16px RSBold;color:var(--orange);text-align:center}

.chat{position:absolute;left:0;bottom:0;width:519px;max-width:calc(100vw - 245px)}
.chat .lines{height:118px;background:var(--chat-bg) 0 0/519px 142px;padding:6px 10px 2px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font:16px RS;color:#000;line-height:14px;opacity:.96}
.chat .lines p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat .lines .notice{color:#0000ff}.chat .lines .danger{color:#ef1020}.chat .lines .quest{color:#800000}.chat .lines .levelup{color:#0000ff}.chat .lines .rare{color:#ef1020}.chat .lines .game{color:#000}
.chat .tabs{height:24px;display:flex;background:var(--stone-tile);border:1px solid #000;border-top:0}
.chat .tabs span{flex:1;display:grid;place-items:center;font:14px RSSmall;color:var(--white);text-shadow:var(--shadow);border-right:1px solid #000}
.chat .tabs span.on{color:var(--orange)}
.chat .tabs span i{font-style:normal;color:var(--green)}

/* Dialogue (chathead + name + text + "Click here to continue") over the chatbox. */
.dialogue{position:absolute;left:0;bottom:24px;width:519px;height:118px;background:var(--chat-bg) 0 0/519px 142px;display:grid;grid-template-columns:110px 1fr;color:#000;cursor:pointer;z-index:6}
.dialogue canvas{width:100px;height:100px;margin:9px 5px}
.dialogue .t{padding:10px 18px 0 6px;text-align:center}
.dialogue .n{font:16px RSBold;color:var(--dkred);margin-bottom:6px}
.dialogue .x{font:16px RS;color:#000;line-height:16px;min-height:62px}
.dialogue .c{font:16px RS;color:var(--blue)}
.dialogue .c:hover{color:#fff}

/* ----- in-run HUD ----- */
.quest-box{position:absolute;left:6px;top:6px;width:250px}
.quest-box .floor{font:16px RSBold;color:var(--orange)}
.quest-box .step{font:14px RSSmall;color:var(--white);margin-top:2px}
.quest-box .step.done{color:var(--dkgreen);text-decoration:line-through}
.quest-box .time{position:absolute;right:0;top:0;font:16px RSBold;color:var(--yellow)}
.quest-box .slayer{font:14px RSSmall;color:var(--yellow);margin-top:3px}
.runlvl{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:300px;text-align:center}
.runlvl .bar{height:10px;border:1px solid #000;background:#3b0000;margin-top:2px;position:relative}
.runlvl .bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#ffdc4c,#c9890a);width:0}
.runlvl .lbl{font:14px RSSmall;color:var(--white);text-shadow:var(--shadow)}
.bossbar{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:min(420px,60vw);text-align:center;background:rgba(0,0,0,.55);border:1px solid #000;padding:3px 6px 6px}
.bossbar .nm{font:16px RSBold;color:var(--orange);text-shadow:var(--shadow)}
.bossbar .hp{position:relative;height:16px;background:#ff0000;border:1px solid #000;margin-top:2px}
.bossbar .hp i{position:absolute;inset:0 auto 0 0;background:#00ff00;width:100%}
.bossbar .hp span{position:absolute;inset:0;display:grid;place-items:center;font:12px RSSmall;color:#fff;text-shadow:var(--shadow)}
.xpdrops{position:absolute;right:262px;top:30px;width:140px;height:160px;overflow:hidden}
.xpdrops div{position:absolute;right:0;display:flex;align-items:center;gap:3px;font:16px RSBold;color:var(--white);text-shadow:var(--shadow);animation:xpup 1.6s linear forwards}
.xpdrops img{width:17px;height:17px;object-fit:contain}
@keyframes xpup{from{transform:translateY(130px);opacity:1}85%{opacity:1}to{transform:translateY(0);opacity:0}}
.banner{position:absolute;left:50%;top:26%;transform:translateX(-50%);text-align:center;font:16px RSBold;color:var(--yellow);text-shadow:var(--shadow),0 0 6px #000;white-space:nowrap;pointer-events:none;animation:fade 3.2s forwards}
.banner.big{font-size:32px;top:22%}.banner .sub{display:block;font:16px RSBold;color:var(--orange)}
@keyframes fade{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
.levelup-msg{position:absolute;left:50%;top:21%;transform:translateX(-50%);text-align:center;pointer-events:none;animation:fade 3s forwards}
.levelup-msg .t{font:16px RSBold;color:var(--blue);text-shadow:none;background:var(--chat-bg) 0 0/519px 142px;padding:10px 26px;border:1px solid #000;display:flex;gap:10px;align-items:center;color:#000}
.levelup-msg .t b{color:var(--blue)}

/* Wilderness level, clue scroll, side quest */
.wildy{position:absolute;right:248px;bottom:300px;display:flex;align-items:center;gap:4px;font:16px RSBold;color:#ffff00;text-shadow:var(--shadow)}
.wildy .skull{width:30px;height:30px;opacity:.45}.wildy.on .skull{opacity:1}.wildy .skull img{width:25px;height:25px}
.cluebox{position:absolute;left:6px;top:130px;width:260px;background:var(--parch);color:#000;border:2px solid #4a3a20;box-shadow:0 0 0 2px #000;padding:6px 8px;text-align:center}
.cluebox .ct{font:14px RSBold;color:#800000}.cluebox .cx{font:14px RS;margin:4px 0;line-height:15px}.cluebox .ch{font:12px RSSmall;color:#000080}
.sideq{position:absolute;left:6px;top:96px;width:250px;font:14px RSSmall;color:#fff;text-shadow:var(--shadow)}.sideq b{color:#00ffff;font:14px RSBold}
.diary{display:grid;grid-template-columns:200px 1fr;gap:10px;width:min(760px,92vw);height:min(440px,70vh)}
.diary .tasks{overflow:auto}.diary .tasks p{margin:2px 0;font:14px RSSmall;color:#ff981f}.diary .tasks p.done{color:#0dc10d;text-decoration:line-through}.diary .tasks h4{margin:8px 0 2px;font:14px RSBold;color:#ffff00}
.hiscores table{border-collapse:collapse;font:14px RSSmall;width:min(640px,90vw)}.hiscores th{color:#ff981f;text-align:left;padding:2px 6px}.hiscores td{color:#fff;padding:2px 6px;border-top:1px solid #2b2318}
/* bank, grand exchange, caskets */
.bank{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:10px;width:min(900px,94vw);height:min(560px,76vh)}
.bleft{display:flex;flex-direction:column;min-height:0;gap:4px}.bright{overflow:auto;display:flex;flex-direction:column;gap:6px}
.bhead{display:flex;gap:12px;align-items:center;font:14px RSSmall;color:#ffff00}.bsearch{margin-left:auto;background:#1c160f;border:1px solid #000;color:#ff981f;font:14px RSSmall;padding:2px 6px}
.bgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,44px);grid-auto-rows:40px;gap:2px;align-content:start;background:rgba(0,0,0,.25);border:1px solid #000;padding:4px}
.bslot{position:relative;width:44px;height:40px;display:grid;place-items:center}.bslot img{max-width:36px;max-height:32px}.bslot:hover{filter:brightness(1.25)}
.bslot .q{position:absolute;left:1px;top:-1px;font:12px RSSmall;color:#ffff00;text-shadow:1px 1px 0 #000}.bslot .q.k{color:#fff}.bslot .q.m{color:#00ff80}
.bslot.empty{opacity:.35}.bslot.empty img{max-width:28px}
.bdetail{min-height:84px;font:14px RSSmall;color:#fff;background:var(--trade-dark);border:1px solid #000;padding:4px 6px;white-space:pre-line}.bdetail b{color:#ff981f}
.binv .inv{grid-template-columns:repeat(4,44px)}.binv h3,.bworn h3{margin:0 0 2px}
.worngrid{display:grid;grid-template-columns:repeat(3,44px);gap:2px;justify-content:center}
.bstats{font:12px RSSmall;color:#fff}.bstats b{display:block;color:#ff981f;margin-top:3px}
.ge{width:min(820px,94vw);max-height:78vh;overflow:auto}
.geslots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.geslot{background:var(--trade-dark);border:1px solid #000;box-shadow:inset 0 0 0 1px #5d5240;padding:4px;min-height:110px;display:flex;flex-direction:column;gap:3px;font:14px RSSmall;color:#fff}
.geslot.deal{box-shadow:inset 0 0 0 1px #ffb000}.geslot.sold{opacity:.45}
.geslot.empty{align-items:center;justify-content:center;color:#8f8f8f}.geslot b{color:#ff981f}
.gebar{height:8px;background:#000;border:1px solid #000}.gebar i{display:block;height:100%}
.geform{margin-top:8px;background:var(--trade-dark);border:1px solid #000;padding:6px;font:14px RSSmall;color:#fff}.geform input[type=number]{width:110px;background:#1c160f;border:1px solid #000;color:#ffff00;font:14px RSSmall}
.gepick{max-height:220px;overflow:auto;display:flex;flex-direction:column}.gepickrow{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:6px;text-align:left;color:#ff981f;font:14px RSSmall}.gepickrow:hover{background:#3a3125}
.gepickrow img{max-width:32px;max-height:28px}
.watson .tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tier{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--trade-dark);border:1px solid #000;padding:6px;font:14px RSSmall;color:#fff}.tier b{color:#ff981f}
.reveal{margin-top:8px;text-align:center;font:14px RSSmall;color:#fff}
.rgrid{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:4px 0}
.ritem{position:relative;width:46px;height:42px;display:grid;place-items:center;background:#1c160f;border:1px solid #000}.ritem img{max-width:36px;max-height:32px}.ritem .q{position:absolute;left:1px;top:-1px;font:12px RSSmall;color:#ffff00}
.ritem.uncommon{box-shadow:0 0 0 1px #3fa020}.ritem.rare{box-shadow:0 0 6px 2px #ffb000}.ritem.mega{box-shadow:0 0 10px 3px #ff40ff;animation:pulse 1s infinite alternate}
@keyframes pulse{to{filter:brightness(1.6)}}
.cls.big{height:auto;display:flex;flex-direction:column;gap:4px;padding:8px;text-align:center;font:14px RSSmall;color:#fff}.cls.big b{color:#ff981f;font:16px RSBold}.cls.big small{color:#c0b090}
.iron{display:block;margin:8px 0;font:14px RSSmall;color:#fff}
/* workshop */
.workshop{width:min(760px,94vw);max-height:78vh;display:flex;flex-direction:column}
.recipes{overflow:auto;max-height:58vh;display:flex;flex-direction:column;gap:3px;margin-top:4px}
.recipe{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;background:var(--trade-dark);border:1px solid #000;box-shadow:inset 0 0 0 1px #5d5240;padding:3px 6px;font:14px RSSmall;color:#fff}
.recipe b{color:#ff981f}.recipe.locked{opacity:.5}.recipe img{max-width:36px;max-height:32px}
.needs{display:flex;gap:8px;flex-wrap:wrap}.need{display:inline-flex;align-items:center;gap:2px;color:#ffff00}.need img{max-width:22px;max-height:20px}.need small{color:#c0b090}.need.short{color:#ff4040}
/* panels */
.inv{display:grid;grid-template-columns:repeat(4,42px);grid-auto-rows:36px;gap:0 0;justify-content:center}
.slot{position:relative;display:grid;place-items:center}
.slot img{max-width:36px;max-height:32px}
.slot .q{position:absolute;left:1px;top:-1px;font:14px RSSmall;color:var(--yellow);text-shadow:var(--shadow)}
.slot.k .q{color:#fff}.slot.m .q{color:#00ff80}
.slot:hover{filter:brightness(1.2)}
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.sk{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 4px;background:var(--trade-dark);border:1px solid #000;box-shadow:inset 0 0 0 1px #534938}
.sk img{width:24px;height:24px;object-fit:contain}
.sk b{font:14px RSSmall;color:var(--yellow);text-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:6px}
.list p{margin:3px 0}
.prayers{display:grid;grid-template-columns:repeat(5,37px);gap:2px;justify-content:center}
.pray{width:37px;height:37px;display:grid;place-items:center;border-radius:50%}
.pray.on{background:radial-gradient(circle,#b9a46b 0,#8a7745 55%,transparent 70%)}
.pray.locked img{opacity:.35}
.loadout{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.lo{position:relative;height:44px;display:grid;place-items:center;background:var(--trade-dark);border:1px solid #000;box-shadow:inset 0 0 0 1px #534938}
.lo img{max-width:34px;max-height:32px}.lo .q{position:absolute;right:2px;bottom:0;font:14px RSSmall;color:var(--yellow)}
.lo .lv{position:absolute;left:2px;top:0;font:12px RSSmall;color:var(--white)}
.style-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.style-btns button{height:46px;background:var(--combat-box) 0 0/100% 100% no-repeat;color:var(--orange);font:14px RSSmall;text-shadow:var(--shadow)}
.style-btns button.on{background-image:var(--combat-box-on);color:#fff}
.specbar{position:relative;height:22px;margin-top:10px;border:1px solid #000;background:#000}
.specbar i{position:absolute;inset:1px auto 1px 1px;background:#3fa020}.specbar span{position:absolute;inset:0;display:grid;place-items:center;font:14px RSSmall;color:#000}
/* Co-op window */
.coop .coopcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center;margin-top:8px}
.coop .coopcols>div{background:var(--trade-dark);border:1px solid #000;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.coop .coopname{display:block;text-align:center;color:#fff}
.coop input.code{font:22px RSBold,RS,serif;letter-spacing:6px;text-align:center;width:150px;margin:0;color:#ffff00}
.coopcode{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;color:#fff}
.coopcode b{font:28px RSBold,RS,serif;letter-spacing:8px;color:#ffff00;text-shadow:var(--shadow)}
.coopmembers{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.coopmember{display:flex;align-items:center;gap:8px;background:var(--trade-dark);border:1px solid #000;padding:4px 8px;color:#fff}
.coopmember img{max-height:28px}.coopmember b{color:#ff981f}
.coopmember.empty{justify-content:center;color:#c0b090;opacity:.8}
/* Lobby loadout bar + tool belt */
.loadbar{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}
.lslots{display:flex;gap:4px;align-items:flex-end;background:rgba(0,0,0,.55);border:1px solid #000;padding:4px 6px 2px;border-radius:2px}
.lslot{position:relative;width:44px;height:50px;padding:0;background:#3e3529;border:1px solid #1a1510;box-shadow:inset 0 0 0 1px #5a4d3c;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lslot img{max-width:36px;max-height:32px;margin-top:-8px;image-rendering:pixelated}
.lslot small{position:absolute;bottom:1px;left:0;right:0;font:11px RSSmall,RS,serif;color:#c0b090;text-align:center}
.lslot .q{position:absolute;top:1px;left:3px;font:12px RSSmall,RS,serif;color:#ffff00;text-shadow:1px 1px 0 #000}
.lslot:hover,.lslot:focus-visible{box-shadow:inset 0 0 0 1px #ffff00;outline:none}
.lslot.missing{box-shadow:inset 0 0 0 2px #c00000;background:#4a2018}
.lslot.missing small{color:#ff5050}
.lsep{width:1px;align-self:stretch;background:#5a4d3c;margin:0 3px}
.setoff{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid #3e3529}
/* World map orb (minimap) and the in-adventure map */
.wmorb{position:absolute;top:130px;right:6px;width:30px;height:30px;padding:0;border:0;background:var(--i) center/contain no-repeat;cursor:pointer;z-index:3}
.wmorb:hover,.wmorb:focus-visible{background-image:var(--ih);outline:none}
.runmap{cursor:grab;position:relative;background:#000;border:2px solid #000;touch-action:none}
.runmap:active{cursor:grabbing}
.runmap img{user-select:none;-webkit-user-drag:none}
.runmap .mfn{position:absolute;transform:translate(-50%,-50%);z-index:3}
.runmap .mlabel{position:absolute;transform:translate(-50%,10px);font:14px RSBold,RS,serif;color:#ff981f;text-shadow:1px 1px 0 #000;white-space:nowrap;z-index:4}
.runmap .mhint{position:absolute;transform:translate(-50%,-100%);z-index:5;animation:hintbob .5s ease-in-out infinite alternate}
.runmap .myou{position:absolute;transform:translate(-50%,-50%);z-index:6}
@keyframes hintbob{to{margin-top:-5px}}
@media (prefers-reduced-motion: reduce){.runmap .mhint{animation:none}}
/* World map start points */
.map .spin{position:absolute;width:13px;height:13px;margin:-6px 0 0 -6px;padding:0;border-radius:50%;border:2px solid #fff;background:#00c8ff;box-shadow:0 0 0 1px #000;cursor:pointer;z-index:2}
.map .spin.locked{background:rgba(0,0,0,.55);border:2px dashed #fff;opacity:.85;cursor:default}
.map .spin.sel{background:#ffff00;box-shadow:0 0 0 2px #000,0 0 6px #ffff00}
/* The client's right-click "Choose Option" menu */
.ctxmenu{position:fixed;z-index:40;background:#5d5447;border:1px solid #000;padding:0 2px 3px;min-width:110px;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ctxhead{background:#000;color:#5d5447;font:14px RSBold,RS,serif;padding:1px 3px 2px;margin:0 -2px 2px}
.ctxopt{display:block;width:100%;text-align:left;background:none;border:0;color:#fff;font:14px RSBold,RS,serif;padding:1px 3px;cursor:pointer;text-shadow:1px 1px 0 #000;white-space:nowrap}
.ctxopt:hover,.ctxopt:focus-visible{color:#ffff00;outline:none;background:rgba(0,0,0,.18)}
.ctxopt:focus:not(:focus-visible){outline:none}
.tip{position:fixed;z-index:30;pointer-events:none;background:#ffffa0;border:1px solid #000;color:#000;font:14px RSSmall;padding:2px 5px;max-width:260px;white-space:pre-line}

/* modal windows */
.modal{position:absolute;inset:0;display:flex;background:rgba(0,0,0,.35);z-index:8;padding:20px;overflow:auto}
.modal>.mwrap{margin:auto;display:grid;place-items:center}
.modal.clear{background:none}
.modal.dock-left>.mwrap{margin:auto auto auto 12px}
.designing .lobby-play{display:none}
.choices{display:flex;flex-direction:column;gap:6px;width:min(520px,86vw)}
.choice{display:grid;grid-template-columns:22px 48px 1fr;align-items:center;gap:8px;text-align:left;padding:6px 8px;background:var(--trade-dark);border:1px solid #000;box-shadow:inset 0 0 0 1px #5d5240}
.choice:hover,.choice:focus-visible{box-shadow:inset 0 0 0 1px #ffff00}
.choice .k{font:16px RSBold;color:var(--yellow)}
.choice .ic{width:48px;height:42px;display:grid;place-items:center}
.choice .ic img{max-width:44px;max-height:40px}
.choice .nm{font:16px RSBold;color:var(--orange)}
.choice .lv{font:14px RSSmall;color:var(--yellow)}
.choice .ds{font:14px RSSmall;color:var(--white)}
.choice.evolve .nm{color:#ff4fff}
.incant{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.scroll{width:min(503px,92vw);background:var(--parch);color:#000;text-align:center;border:2px solid #4a3a20;box-shadow:0 0 0 3px #000;padding:0 0 16px}
.scroll .top{height:47px;background:var(--titlescroll) center/100% 100% no-repeat}
.scroll h2{font:16px RSBold;color:#800000;margin:8px 0 4px}
.scroll .aw{font:16px RSBold;color:#800000;margin-top:10px}
.scroll p{margin:3px 0;font:16px RS;color:#000}
.scroll .ic{display:flex;justify-content:center;gap:6px;margin:6px 0}
.scroll .ic img{max-height:40px}
.results{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.results div{background:var(--trade-dark);border:1px solid #000;padding:6px;text-align:center}
.results b{display:block;font:16px RSBold;color:var(--yellow)}
.results span{font:14px RSSmall;color:var(--orange)}

/* lobby */
.lobby-top{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:flex;gap:6px;flex-wrap:wrap;justify-content:center;z-index:9;max-width:calc(100vw - 400px);pointer-events:none!important}
.lobby-top>*{pointer-events:auto}
@media (max-width:1100px){.lobby-top{left:8px;transform:none;max-width:calc(100vw - 270px);justify-content:flex-start}}
.lobby-play{position:absolute;left:50%;bottom:170px;transform:translateX(-50%);z-index:4;text-align:center}
.lobby-play .who{font:16px RSBold;color:var(--yellow);text-shadow:var(--shadow);margin-bottom:6px}
.wm{position:relative;display:grid;grid-template-columns:auto 260px;gap:10px}
.wm .map{position:relative;overflow:hidden;width:min(560px,58vw);height:min(520px,68vh);border:1px solid #000;background:#000}
.wm .map img{position:absolute;image-rendering:pixelated}
.wm .zone{position:absolute;border:2px dashed rgba(255,255,0,.55);pointer-events:none}
.wm .zone span{position:absolute;left:4px;top:3px;font:12px RSSmall;color:#ffff00;text-shadow:1px 1px 0 #000;white-space:nowrap}
.wm .pin{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;font:14px RSBold;color:var(--white);text-shadow:var(--shadow),0 0 3px #000}
.wm .pin img{width:15px;height:15px;position:static}
.wm .pin.locked{color:#8f8f8f}.wm .pin.sel{color:var(--yellow)}
.wm .pin.done img{filter:hue-rotate(80deg)}
.info{display:flex;flex-direction:column;gap:6px;font:14px RSSmall;color:var(--white)}
.info h3{margin:0;font:16px RSBold;color:var(--orange)}
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.cls{height:44px;display:grid;place-items:center;background:var(--trade-dark);border:1px solid #000;box-shadow:inset 0 0 0 1px #534938}
.cls.on{box-shadow:inset 0 0 0 1px #ffff00}.cls.locked{opacity:.4}
.cls img{max-height:34px;max-width:36px}
.shop{display:grid;grid-template-columns:200px 1fr;gap:10px;width:min(780px,92vw)}
.shop .tabsv{display:flex;flex-direction:column;gap:3px}
.shop .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px;align-content:start;min-height:220px}
.si{position:relative;height:58px;display:grid;place-items:center;background:var(--trade-dark);border:1px solid #000;box-shadow:inset 0 0 0 1px #534938}
.si:hover{box-shadow:inset 0 0 0 1px #ffff00}.si img{max-width:40px;max-height:36px}
.si .q{position:absolute;left:3px;top:1px;font:14px RSSmall;color:var(--yellow)}
.si .p{position:absolute;right:3px;bottom:1px;font:12px RSSmall;color:#fff}
.si.max{opacity:.5}
.design{display:grid;grid-template-columns:220px;gap:4px;align-items:start;max-height:calc((100vh - 230px) / var(--z, 1));overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#5a4a33 #2a2117}
.design h3{margin:2px 0}
.design .ln{display:grid;grid-template-columns:22px 1fr 22px;align-items:center;margin:4px 0;text-align:center;font:14px RSSmall;color:var(--orange)}
.design .ln button{width:22px;height:22px;color:var(--yellow);font:16px RSBold}
.design .ln button:hover{color:#fff}
.clog{display:grid;grid-template-columns:190px 1fr;gap:8px;width:min(700px,92vw);height:min(420px,70vh)}
.clog .src{overflow:auto;display:flex;flex-direction:column}
.clog .src button{text-align:left;padding:2px 4px;font:14px RSSmall;color:var(--orange)}.clog .src button.done{color:var(--dkgreen)}.clog .src button.on{background:#5a4f3a}
.clog .items{display:grid;grid-template-columns:repeat(auto-fill,44px);gap:4px;align-content:start}
.clog .items div{position:relative;height:40px;display:grid;place-items:center}
.clog .items img{max-width:36px;max-height:32px}.clog .items .no img{opacity:.25;filter:grayscale(1)}
.clog .items .q{position:absolute;left:0;top:-1px;font:12px RSSmall;color:var(--yellow)}
.ach{width:min(620px,92vw);max-height:min(460px,72vh);overflow:auto}
.ach .a{display:grid;grid-template-columns:70px 1fr;gap:6px;padding:4px 2px;border-bottom:1px solid #2b2318;font:14px RSSmall}
.ach .a .t{color:var(--yellow)}.ach .a .n{color:var(--orange)}.ach .a.done .n{color:var(--dkgreen)}.ach .a .d{color:#fff}
.journal{width:min(503px,92vw);max-height:76vh;overflow:auto}
.quests p{margin:2px 0;font:14px RSSmall;cursor:pointer}.quests .q0{color:#ff0000}.quests .q1{color:#ffff00}.quests .q2{color:#00ff00}
.settings label{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:8px;margin:6px 0;font:14px RSSmall;color:var(--orange)}
.settings input[type=range]{accent-color:#ff981f}
.settings select{background:#1c160f;color:#ff981f;border:1px solid #000;font:14px RSSmall;padding:2px}

/* touch */
.touch{position:absolute;left:12px;bottom:160px;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:3px;opacity:.85;z-index:5}
.touch button{background:rgba(0,0,0,.45);border:1px solid #000;color:var(--yellow);font:18px RSBold}
.touch [data-move=up]{grid-column:2}.touch [data-move=left]{grid-row:2;grid-column:1}.touch [data-move=down]{grid-row:2;grid-column:2}.touch [data-move=right]{grid-row:2;grid-column:3}

@media (max-width:900px){
  .chat{width:min(519px,calc(100vw - 245px))}
  .chat .lines{height:84px}
  .side .panel{height:220px}
  .xpdrops{right:6px;top:180px}
  .quest-box{width:200px}
  .runlvl{top:auto;bottom:118px;width:220px}
}
@media (max-width:700px){
  .side{width:200px}.side .tabs{width:200px}.side .panel{width:200px;height:200px;padding:6px}
  .chat{max-width:calc(100vw - 204px)}
  .inv{grid-template-columns:repeat(4,36px)}
  .mini{transform:scale(.8);transform-origin:top right}
}
@media (prefers-reduced-motion:reduce){.banner,.levelup-msg,.xpdrops div{animation-duration:.01s}}