/* Layout: game viewport on the left, stone side panel (skills + pack) on the right, chat log under the viewport. Single dark woodland theme by design. */
:root{
  --bg:#171a14;          /* moss-black ground */
  --stone:#2b2a22;       /* panel stone */
  --stone-2:#35332a;     /* raised slot */
  --edge:#55503d;        /* worn bronze edge */
  --parch:#ddcfab;       /* parchment text */
  --dim:#9d9579;         /* faded ink */
  --gold:#f0c24f;        /* accent: game-message gold */
  --leaf:#78b455;        /* xp green */
  --danger:#d9705a;
  --logo:"Pixelify Sans", ui-monospace, "Courier New", monospace;   /* only the Evermarch logo */
  --pixel:"Atkinson Hyperlegible", system-ui, sans-serif;   /* v0.67.0: headings, numbers and labels in the easy-to-read font (was Pixelify Sans) */
  --body:"Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--parch);font-family:var(--body);font-size:15px;line-height:1.45}
.wrap{max-width:1180px;margin:0 auto;padding-block:16px 28px;padding-inline:16px;display:grid;gap:12px;
  grid-template-columns:minmax(0,1fr) 316px;grid-template-areas:"head head" "game side" "chat side"}
header{grid-area:head;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
h1{font-family:var(--logo);font-weight:600;font-size:1.9rem;margin:0;color:var(--gold);letter-spacing:.02em;text-shadow:2px 2px 0 #000}
header p{margin:0;color:var(--dim);font-size:.92rem}
.tag{font-family:var(--pixel);font-size:.8rem;color:var(--dim);border:1px solid var(--edge);padding:1px 7px;border-radius:2px;letter-spacing:.06em;text-transform:uppercase}

.game{grid-area:game;position:relative;height:min(68vh,600px);min-height:320px;border:3px solid var(--edge);border-radius:3px;overflow:hidden;background:#0c0e0a;box-shadow:inset 0 0 0 2px #000}
#world{display:block;width:100%;height:100%;cursor:pointer;touch-action:pan-x pan-y}   /* v0.99.19: pinches are the game's zoom, not the page's */
.hover{position:absolute;top:6px;left:9px;font-family:var(--pixel);font-size:1rem;color:#fff;text-shadow:1px 1px 0 #000,0 0 3px #000;pointer-events:none}
.hover b{color:var(--gold);font-weight:400}
.hover i{color:var(--dim);font-style:normal}
.mmwrap{position:absolute;top:8px;right:8px;width:150px;height:150px;z-index:4}
.minimap{display:block;width:100%;height:100%;border-radius:50%;border:3px solid var(--edge);box-shadow:0 0 0 2px #000,0 4px 10px rgba(0,0,0,.5);background:#0c0e0a;cursor:pointer}
.mmn{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-family:var(--pixel);font-size:.8rem;color:var(--gold);background:var(--stone);border:2px solid var(--edge);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;pointer-events:none;line-height:1}
@media (max-width:820px){.mmwrap{width:108px;height:108px}}
.mmexp{position:absolute;left:-2px;bottom:4px;width:26px;height:26px;border-radius:50%;background:var(--stone);border:2px solid var(--edge);color:var(--parch);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 0 0 1px #000}
.mmexp svg{width:14px;height:14px}
.mmexp:hover{color:var(--gold);border-color:var(--gold)}
.hporb{position:absolute;right:calc(100% - 16px);top:26px;display:flex;align-items:center;gap:3px;background:var(--stone);border:2px solid var(--edge);border-radius:14px;padding:2px 8px 2px 4px;box-shadow:0 0 0 1px #000;font-family:var(--pixel);font-size:.9rem;color:#7cff6b;font-variant-numeric:tabular-nums}
.hporb svg{width:16px;height:16px}
.hporb.low{color:#ff6b5a}
.mapwin{position:absolute;inset:auto 50% 50% auto;transform:translate(50%,50%);width:min(760px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--stone);border:3px solid var(--edge);border-radius:3px;box-shadow:0 0 0 2px #000,0 10px 30px rgba(0,0,0,.6);padding:10px 12px;z-index:6}
.mapframe{position:relative;background:#000;border:1px solid #000;overflow:hidden}
#bigMap{display:block;width:100%;height:min(62vh,480px);cursor:grab;touch-action:none}
#bigMap.dragging{cursor:grabbing}
.mapctl{position:absolute;top:6px;right:6px;display:flex;gap:4px}
.mapctl .btn{padding:2px 8px;background:rgba(40,38,30,.9)}
.maphint{margin:4px 0 0}
.maplvl{position:absolute;bottom:6px;left:6px;flex-wrap:wrap;display:flex;gap:4px;align-items:center}
.maplvl .btn{padding:2px 8px;background:rgba(40,38,30,.9)}
.maplvl span{background:rgba(0,0,0,.65);color:var(--gold);padding:2px 8px;border-radius:3px;font-size:.85rem;white-space:nowrap}
.lvlbadge{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--stone);border:2px solid var(--edge);border-radius:10px;padding:1px 8px;box-shadow:0 0 0 1px #000;font-size:.75rem;color:var(--parch);white-space:nowrap;pointer-events:none}
.lvlbadge.up{color:#9fe9ff}.lvlbadge.down{color:#ffb36b}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:.78rem;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{display:inline-block;width:10px;height:10px;border:1px solid rgba(0,0,0,.6)}
.version{position:absolute;bottom:6px;left:8px;font-family:var(--pixel);font-size:.72rem;color:#cfc6a6;opacity:.6;text-shadow:1px 1px 0 #000;pointer-events:none;letter-spacing:.03em}
.debug{position:absolute;bottom:6px;right:8px;font-family:var(--pixel);font-size:.78rem;color:#cfc6a6;opacity:.75;text-shadow:1px 1px 0 #000;pointer-events:none;font-variant-numeric:tabular-nums}

aside{grid-area:side;display:flex;flex-direction:column;min-width:0}
.stabs{display:grid;grid-template-columns:repeat(10,1fr);background:var(--stone);border:3px solid var(--edge);border-bottom:0;border-radius:3px 3px 0 0}
.stab{background:none;border:0;border-right:1px solid #1a1914;color:var(--dim);padding:7px 0;cursor:pointer;display:grid;place-items:center}
.stab:last-child{border-right:0}
.stab svg{width:20px;height:20px}
.stab:hover{color:var(--parch)}
.stab.on{color:var(--gold);background:var(--stone-2);box-shadow:inset 0 -2px 0 var(--gold)}
.tabpanel{border-radius:0 0 3px 3px;min-height:420px}
.count{float:right;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.note{font-size:.8rem;color:var(--dim);margin:10px 0 0}

.skillgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-bottom:12px}
.sk{font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:5px 5px;font-size:.74rem;min-width:0}
.sk b{font-family:var(--pixel);font-weight:400;color:var(--gold);font-size:.95rem;font-variant-numeric:tabular-nums}
.sk.locked{opacity:.45}
.sk.locked b{color:var(--dim)}
.sk.qlocked span{color:var(--dim)} .sk.qlocked b{font-size:.75rem;filter:grayscale(1);opacity:.75}
.sk span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk svg{width:16px;height:16px;flex:none}
.sk:hover{border-color:var(--edge)}
.sk.sel{border-color:var(--gold);opacity:1}
.skill .skico{grid-row:span 2;width:36px;height:36px}
.skill .skico svg{width:100%;height:100%}

.qlist{display:flex;flex-direction:column;gap:8px}
.quest{background:var(--stone-2);border:1px solid #1a1914;border-left:4px solid var(--danger);border-radius:2px;padding:8px 10px}
.quest.active{border-left-color:var(--gold)}
.quest.done{border-left-color:var(--leaf)}
.quest.locked{opacity:.5;border-left-color:var(--edge)}
.quest h3{font-family:var(--pixel);font-weight:400;font-size:1rem;margin:0 0 2px;color:var(--parch)}
.quest .st{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.quest p{margin:4px 0 6px;font-size:.84rem}
.quest .bar{margin:4px 0 6px}

.addfriend{display:flex;gap:6px}
.addfriend input{flex:1;min-width:0;background:#15140f;border:1px solid var(--edge);color:var(--parch);font:inherit;padding:4px 8px;border-radius:2px}
.formerr{color:var(--danger);font-size:.8rem;margin:6px 0 0}
.flist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.flist li{display:flex;align-items:center;gap:8px;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:4px 8px}
.flist .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.flist .off{font-size:.75rem;color:var(--danger)}
.flist .onl{font-size:.75rem;color:#7cff6b}
.flist button{background:none;border:0;color:var(--dim);cursor:pointer;font-size:1rem;line-height:1;padding:2px 4px}
.flist button:hover{color:var(--danger)}
.flist .empty{background:none;border:0;color:var(--dim);font-size:.85rem;padding:4px 0}

.opts{display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.opts label{display:flex;gap:8px;align-items:center;cursor:pointer}
.opts label.sub{padding-left:22px}
.opts input:disabled + *, .opts label:has(input:disabled){opacity:.5;cursor:not-allowed}
.opts label select{flex:0 0 auto;width:auto;min-width:0;max-width:120px}
.opts label:has(select) span{flex:1}
.danger{margin-top:18px;padding-top:12px;border-top:1px solid var(--edge)}

.equip{display:grid;grid-template-columns:repeat(3,52px);grid-template-areas:". head ." "cape neck ammo" "weapon body shield" ". legs ." "hands feet ring";gap:6px;justify-content:center;margin:4px 0 10px}
.eq{width:52px;height:52px;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;display:grid;place-items:center;font-size:.62rem;color:var(--dim);text-align:center;padding:0;line-height:1.1;cursor:default}
.eq.has{border-color:var(--edge);cursor:pointer;color:inherit}
.cosequip{grid-template-areas:". head ." "cape neck ." "weapon body shield" ". legs ." "hands feet ."}.cosequip .eq.has{border-color:#b48ad8}   /* v0.93.3 */
/* v0.93.4: the Combat / Cosmetic toggle */
.gearmode{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:2px 0 8px}
.gm{font:inherit;font-size:.8rem;padding:6px 4px;border:1px solid #1a1914;background:var(--stone-2);color:var(--dim);cursor:pointer;border-radius:2px}
.gm[data-gmode=combat].on{background:#5a3a1a;border-color:#e8b04a;color:#ffe6a8}
.gm[data-gmode=cos].on{background:#3e2a58;border-color:#b48ad8;color:#ecdcff}
.gearview{border:1px solid transparent;border-radius:3px;padding:4px 2px}
.gmhead{margin:0 0 6px;text-align:center;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#e8b04a}
.cosview{background:rgba(120,80,170,.16);border-color:#7d5aa8}.cosview .gmhead{color:#cfa8ff}
/* v0.99.41 (Kyle, #61): the three gear loadouts */
.loadouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:6px;margin:0 0 6px}
.lo{border:1px solid var(--edge);border-radius:3px;padding:4px;background:rgba(0,0,0,.18);display:flex;flex-direction:column;gap:3px;min-width:0}
.lo.on{border-color:#e8b04a}.lo.lolocked{opacity:.55;border-style:dashed;justify-content:center;text-align:center}
.lohead{font-size:.75rem;color:#e8b04a;text-align:center}.lohead small{color:var(--parch);opacity:.7}
.loicons{display:flex;flex-wrap:wrap;gap:1px;justify-content:center;min-height:20px;align-items:center}.loicons svg,.loicons .pxi{width:18px;height:18px}.loicons small{opacity:.6;font-size:.7rem}
.loic{width:22px;height:22px;padding:0;margin-right:4px;vertical-align:middle;border:1px solid var(--edge);border-radius:2px;background:var(--stone-2);color:var(--dim);font-size:.8rem;cursor:pointer}.loic svg,.loic .pxi{width:18px;height:18px;display:block;margin:auto}
.loicpick svg,.loicpick .pxi{width:18px;height:18px;vertical-align:middle;margin-right:6px}
.lobtns{display:flex;gap:3px}.lobtns .btn{flex:1;padding:2px 0;font-size:.72rem;min-width:0}
.cosview .eq{background:#2c2338}
.eq .cosmark{position:absolute;top:1px;right:2px;font-size:.6rem;color:#cfa8ff;text-shadow:0 0 2px #000}
.hslook{display:flex;gap:6px;margin:0 0 10px}.hslook input{flex:1;font:inherit;padding:5px 8px;min-width:0}   /* v0.94.0: player lookup */
.hsname{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}.hsname:hover{color:#e8b04a}
.kall{color:#4f8a30}.kall i,.kby i{font-style:normal;opacity:.85}
.eq svg,.eq .pxi{width:80%;height:80%}

.bankwin{position:absolute;inset:auto 50% 50% auto;transform:translate(50%,50%);width:min(440px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--stone);border:3px solid var(--edge);border-radius:3px;box-shadow:0 0 0 2px #000,0 10px 30px rgba(0,0,0,.6);padding:10px 12px;z-index:5}
.bankhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bankhead h2{font-family:var(--pixel);font-weight:600;font-size:1.1rem;color:var(--gold);margin:0;flex:1;text-shadow:1px 1px 0 #000}
.bankhead .count{float:none;color:var(--dim);font-size:.85rem}
.bx{background:none;border:1px solid var(--edge);color:var(--parch);width:26px;height:26px;border-radius:2px;cursor:pointer;font-size:1.1rem;line-height:1}
.bx:hover{color:var(--gold);border-color:var(--gold)}
.bankgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:3px;background:#1e1d18;border:1px solid #000;padding:6px;min-height:120px;align-content:start}
.bslot{position:relative;aspect-ratio:1;max-width:100%;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:0;display:grid;place-items:center;cursor:pointer}
.bslot:hover{border-color:var(--gold)}
.bslot svg,.bslot .pxi{width:74%;height:74%}
.bslot .n{position:absolute;top:0;left:2px;font-family:var(--pixel);font-size:.66rem;color:#ffff00;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums}
.bankempty{grid-column:1/-1;color:var(--dim);font-size:.85rem;padding:8px}
.bankfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.qty{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--dim)}
.qty span{margin-right:4px}
.qty .btn{padding:2px 7px}
.qty .btn.on{color:#000;background:var(--gold);border-color:var(--gold)}
.banknote{font-size:.78rem;color:var(--dim);margin:8px 0 0}
.slot.dep:hover{border-color:var(--gold)}
.slot{position:relative}
.slot .n{position:absolute;top:0;left:2px;font-family:var(--pixel);font-size:.66rem;color:#ffff00;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums}
.anvilwin{width:min(560px,calc(100% - 24px))}
.goldrow{display:flex;align-items:center;gap:7px;margin-top:8px;padding:5px 8px;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;font-size:.85rem;color:var(--dim)}
.goldrow svg,.goldrow .pxi{width:22px;height:22px}
.goldrow b{font-family:var(--pixel);font-weight:400;font-size:1.05rem;color:var(--gold);font-variant-numeric:tabular-nums}
.count.gold{color:var(--gold)}
.shopwin{width:min(560px,calc(100% - 24px))}
.adminwin{width:min(600px,calc(100% - 24px));border-color:#ff00c8;box-shadow:0 0 0 2px #000,0 0 18px rgba(255,0,200,.45)}
.adminbanner{margin:-10px -12px 10px;padding:4px 8px;font-family:var(--pixel);font-size:.82rem;letter-spacing:.08em;text-align:center;color:#000;
  background:repeating-linear-gradient(-45deg,#ffe600 0 12px,#ff00c8 12px 24px);color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.adminwin h2{color:#ff6be0 !important}
.adminnote{margin:0 0 8px;font-size:.84rem;color:var(--parch)}
.adminlist .price{opacity:1;cursor:pointer;font:inherit;font-size:.76rem;color:var(--parch);text-align:left}
.adminlist .price:hover{border-color:#ff00c8}
.adminlist .price b{color:#ff6be0}
.stock{display:flex;flex-direction:column;gap:6px;background:#1e1d18;border:1px solid #000;padding:6px}
.buy{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;text-align:left;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:6px 10px;color:var(--parch);font:inherit;cursor:pointer}
.buy svg,.buy .pxi{width:44px;height:44px}
.buy b{display:block;font-size:.95rem}
.buy small{color:var(--dim);font-size:.78rem}
.buy .price{font-family:var(--pixel);color:var(--gold);font-size:1rem;white-space:nowrap}
.buy:hover:not(:disabled){border-color:var(--gold)}
.buy:disabled{opacity:.5;cursor:not-allowed}
.buy.short .price{color:var(--danger)}
.shopsay{margin:0 0 8px;font-style:italic;color:var(--parch);font-size:.86rem}
.pricelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;background:#1e1d18;border:1px solid #000;padding:6px;max-height:260px;overflow:auto}
.price{display:grid;grid-template-columns:26px 1fr auto;gap:6px;align-items:center;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:3px 6px;font-size:.76rem;opacity:.5;min-width:0}
.price svg,.price .pxi{width:26px;height:26px}
.price span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.price b{font-family:var(--pixel);font-weight:400;color:var(--gold);font-variant-numeric:tabular-nums}
.price.have{opacity:1;border-color:var(--edge)}
.price.have span::after{content:attr(data-n);color:var(--dim);margin-left:4px}
.buy .price{display:block;background:none;border:0;padding:0;opacity:1;font-size:1rem;overflow:visible}   /* v0.42.0: the shop price was being clipped by the generic .price box */
.sellx{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:.85rem}
.sellx input{width:90px;background:#15140f;border:1px solid var(--edge);color:var(--parch);font:inherit;padding:3px 6px;border-radius:2px}
.recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px;background:#1e1d18;border:1px solid #000;padding:6px}
.rcp{display:grid;grid-template-columns:32px 1fr;gap:2px 7px;align-items:center;text-align:left;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:5px 6px;color:var(--parch);font:inherit;font-size:.78rem;cursor:pointer;min-width:0}
.rcp svg,.rcp .pxi{grid-row:span 2;width:32px;height:32px}
.rcp b{font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.rcp small{color:var(--dim);font-size:.7rem}
.rcp:hover:not(:disabled){border-color:var(--gold)}
.rcp.short small{color:var(--danger)}
.rcp:disabled{opacity:.45;cursor:not-allowed}

.toolgrid{display:grid;grid-template-columns:repeat(3,52px);gap:6px;justify-content:center;margin:4px 0 10px}
.toolgrid .eq{position:relative}
.toolgrid .eq small{position:absolute;bottom:2px;left:0;right:0;font-size:.55rem;color:var(--dim);opacity:.8}
.sub2{margin-top:16px !important;padding-top:12px;border-top:1px solid var(--edge)}
.styles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stylebtn{display:flex;align-items:center;gap:8px;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;color:var(--parch);font:inherit;font-size:.85rem;padding:7px 8px;cursor:pointer;text-align:left}
.stylebtn svg{width:20px;height:20px;flex:none}
.stylebtn small{display:block;color:var(--dim);font-size:.72rem}
.stylebtn:hover{border-color:var(--edge)}
.stylebtn[aria-pressed="true"]{border-color:var(--gold);background:#3e3a2c;box-shadow:inset 0 0 0 1px var(--gold)}
.stylebtn[aria-pressed="true"] small{color:var(--gold)}

.acct{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 14px;font-size:.88rem}
.acct dt{color:var(--dim)}
.acct dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.panel{background:var(--stone);border:3px solid var(--edge);border-radius:3px;padding:10px 12px;box-shadow:inset 0 0 0 2px #1a1914}
.panel h2{font-family:var(--pixel);font-weight:400;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
.skill{display:grid;grid-template-columns:36px 1fr;gap:4px 10px;align-items:center}
.skill .lvl{font-family:var(--pixel);font-size:1.15rem;color:var(--gold);font-variant-numeric:tabular-nums}
.skill .lvl span{color:var(--dim);font-size:.9rem}
.bar{grid-column:1/-1;height:10px;background:#15140f;border:1px solid #000;border-radius:2px;overflow:hidden;margin-top:4px}
.bar div{height:100%;background:linear-gradient(var(--leaf),#4d8434);width:0;transition:width .3s}
.xpline{grid-column:1/-1;font-size:.82rem;color:var(--dim);font-variant-numeric:tabular-nums}

.inv{display:grid;grid-template-columns:repeat(4,minmax(0,44px));justify-content:center;gap:4px}   /* v0.82.0: 4 across × 7 down, small slots */
.addfriend .gtagin{width:4.2em;flex:0 0 auto;text-transform:uppercase;text-align:center}   /* v0.82.0: guild tag boxes */
.gtagv{color:#e8c46a}
.slot{aspect-ratio:1;max-width:100%;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:0;display:grid;place-items:center;cursor:pointer;color:inherit}
.slot:empty{cursor:default}
.slot:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.slot svg,.slot .pxi{width:80%;height:80%}
.invfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:.8rem;color:var(--dim)}
.btn{font-family:var(--pixel);font-size:.85rem;background:var(--stone-2);color:var(--parch);border:1px solid var(--edge);border-radius:2px;padding:3px 9px;cursor:pointer}
.btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.chatwrap{grid-area:chat;display:flex;flex-direction:column;gap:8px;min-width:0}
.chatbox{border:3px solid var(--edge);border-radius:3px;background:#d8c99f;display:flex;flex-direction:column;min-width:0}
.chat{color:#1d1a10;height:140px;overflow-y:auto;padding:6px 10px;font-size:.92rem}
.chat p{margin:0;overflow-wrap:anywhere}
.chat{overscroll-behavior:contain;touch-action:pan-y}.chat .ts{color:#6a6458;font-weight:400;font-style:normal;font-variant-numeric:tabular-nums}   /* v0.99.39 (Kyle, #30): [HH:MM]; scrolling the chat on a phone scrolls the chat, not the page */
.chat .who{font-weight:700}
.chat .chtag{font-weight:700;font-size:.85em}.chat .ch-world{color:#1d5a8a}.chat .ch-local{color:#7a5a00}.chat .ch-pm{color:#00727a}.chat .ch-guild{color:#6a2a9a}   /* v0.99.41 (Kyle, #62): [World] / [Local] / [Private] / [Guild] in the All tab */
.chat .said{color:#0a2f8a}
.chat p.pm,.chat p.pm .who,.chat p.pm .said{color:#00727a}     /* v0.80.0: private messages */
.chat p.flog{color:#6a6458;font-style:italic}.chat p.flog.on{color:#1f7a2e;font-style:normal;font-weight:700}   /* v0.93.2: friend logged in/out */
.flist button.pmb:hover{color:var(--gold)}
.fviews,.bviews{grid-template-columns:repeat(2,1fr)!important}
.fviews .btn,.bviews .btn{grid-column:span 1!important}
.bviews{margin:6px 0}
.ghead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:4px 0}
.glist .grank{color:var(--gold);font-size:.72rem}
.glist .gxp{color:var(--dim);font-size:.72rem;white-space:nowrap}
.glist .gb{color:var(--dim)}
.glist .gb:hover{color:var(--gold)}
.glog{list-style:none;margin:6px 0;padding:0;font-size:.8rem;color:var(--dim)}
.glog li{padding:2px 0}
.pmmode{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
.chat .gtag{color:#5a2a7a;font-weight:700}
.chat .gsaid{color:#6a1f8f}
.chat .announce{color:#004f3f;font-weight:700}
.say{display:flex;align-items:center;gap:6px;border-top:1px solid #a8996f;padding:4px 10px}
.say label{font-weight:700;color:#1d1a10}
.say input{flex:1;min-width:0;background:transparent;border:0;font:inherit;color:#0a2f8a;padding:3px 0;outline:none}
.say input::placeholder{color:#857a5c}
.tabs{display:flex;background:var(--stone);border-top:2px solid var(--edge)}
.tab{flex:1;font-family:var(--pixel);font-size:.9rem;background:none;border:0;border-right:1px solid #1a1914;color:var(--dim);padding:5px 4px;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:6px}
.tab:last-child{border-right:0}
.tab:hover{color:var(--parch)}
.tab.on{color:var(--gold);background:var(--stone-2)}
.tab .dot{font-size:.72rem;color:#000;background:var(--gold);border-radius:8px;padding:0 5px;line-height:1.35}
.tab .dot:empty{display:none}
.pow{color:var(--parch)}
.pow b{color:var(--gold);font-weight:700}
.pow span{color:var(--dim)}
.chat .sys{color:#7a1e00;font-weight:700}
.chat .ex{color:#3a3526;font-style:italic}
.chat .lvlup{color:#0d4e8a;font-weight:700}
.chat p.toolask{color:#0d4e8a;font-weight:700}   /* v0.99.39 (Kyle, #22): "Fetch your axe from the bank and carry on? [Yes]" */
.chat .askyes{font:inherit;font-size:.85em;padding:0 8px;margin-left:2px;cursor:pointer;border:1px solid #6b5a2e;border-radius:3px;background:#f3e3a8;color:#1d1a10}
.dev{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.85rem;color:var(--dim)}
.dev label{display:flex;gap:6px;align-items:center;cursor:pointer}
.dev .btn.warn{color:var(--danger);border-color:#6a3a2e}

.menu{position:fixed;z-index:10;min-width:150px;background:#5d5447;border:2px solid #000;font-family:var(--pixel);font-size:.95rem;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.menu .mh{background:#000;color:#5d5447;padding:1px 6px;color:#b7ab92}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;color:#fff;font:inherit;padding:2px 8px;cursor:pointer;text-shadow:1px 1px 0 #000}
.menu button:hover,.menu button:focus-visible{background:#7a6f5d;outline:none}
.menu button b{color:var(--gold);font-weight:400}
.menu button b.loot,.hover b.loot{color:#ff9a3c}
.menu button b.plr,.hover b.plr{color:#fff}
.menu button i,.hover i{color:#7cff6b;font-style:normal}

@media (max-width:820px){
  .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "game" "chat" "side"}
  .game{height:min(58vh,460px)}
  .chat{height:110px}
}
@media (prefers-reduced-motion:reduce){.bar div{transition:none}}

/* v0.4.0: combat level in menus, Focus tab, view-only Bank tab */
.clvl{font-weight:normal}
.bankgrid.view .bslot{cursor:default}
.bankgrid.view .bslot:hover{border-color:#1a1914}
.focusempty{color:var(--muted,#b8ad94);font-style:italic;padding:14px 4px;text-align:center}
.fstats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0 10px}
.fstats div{background:#1e1d18;border:1px solid #000;padding:4px;text-align:center;font-size:.8rem}
.fstats b{display:block;font-family:var(--pixel);font-size:1rem;color:#ffff00}
.fexam{font-size:.8rem;font-style:italic;opacity:.8;margin:0 0 8px}
.drops{width:100%;border-collapse:collapse;font-size:.82rem}
.drops th{text-align:left;font-weight:normal;opacity:.7;border-bottom:1px solid #000;padding:2px 3px}
.drops td{padding:3px;border-bottom:1px solid rgba(0,0,0,.35);vertical-align:middle}
.drops td.ic svg,.drops td.ic .pxi{width:22px;height:22px;display:block}
.drops td.ic .coin{width:22px;height:22px}
.drops td.loot{text-align:center}
.drops tr.off td:not(.loot){opacity:.45}
.drops .cond{display:block;font-size:.72rem;opacity:.75}
.drops .rate,.drops td:nth-child(3){font-variant-numeric:tabular-nums;white-space:nowrap}

/* v0.6.0: empty general store, collection log */
.shopempty{background:#1e1d18;border:1px solid #000;padding:14px;text-align:center;color:var(--parch);font-size:.86rem}
.cviews{display:flex;gap:4px;margin:4px 0 8px}
.cviews .btn.on,.qviews .btn.on{color:#000;background:var(--gold);border-color:var(--gold)}
#colBody{display:block}
.ccats{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px}
.ccat{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 30%;min-width:0;background:var(--stone-2);border:1px solid #1a1914;color:inherit;padding:4px 6px;text-align:left;cursor:pointer;font:inherit;font-size:.82rem}
.ccat small{opacity:.7;font-size:.72rem}
.ccat.on{border-color:var(--gold);background:rgba(240,194,79,.18);color:var(--gold)}
.citems{}
.citems h3{margin:0 0 2px}
.citem{display:grid;grid-template-columns:34px 1fr auto;gap:6px;align-items:center;background:#1e1d18;border:1px solid #000;padding:4px 6px;margin-bottom:4px}
.citem .cic svg,.citem .cic .pxi{width:30px;height:30px;display:block}
.citem.unfound .cic{filter:brightness(0) opacity(.45)}
.cname{font-size:.85rem}
.crar{font-size:.7rem;margin-left:4px}
.cnext{font-size:.72rem;opacity:.75}
.citem .bar{height:5px;margin:3px 0}
.ctier{font-family:var(--pixel);font-size:.78rem;padding:2px 6px;border:1px solid #000;border-radius:2px;background:#2a2822;min-width:52px;text-align:center}
.ctier.t1{color:#d8d0bc}.ctier.t2{color:#cd7f32}.ctier.t3{color:#c0c7cf}.ctier.t4{color:#f0c24f}.ctier.t5{color:#7ff5e6}
.perks{display:flex;flex-direction:column;gap:5px}
.perk{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#1e1d18;border:1px solid #000;padding:6px 8px}
.perk p{margin:2px 0 0;font-size:.78rem;opacity:.85}
.prank{font-size:.75rem;color:#ffff00;font-family:var(--pixel)}

/* v0.8.0: Quests tab views (Quests / Collection / Achievements) */
.qviews{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:0 0 8px}
.qviews .btn{grid-column:span 2}
.qviews .btn:nth-child(n+4){grid-column:span 3}
.qviews .btn{padding:4px 2px;font-size:.78rem}
.cpts{font-size:.8rem;margin:0 0 6px}
.cpts b{color:#ffff00;font-family:var(--pixel)}
.ccat span{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.citem{grid-template-columns:30px 1fr auto}
.citem .cic svg,.citem .cic .pxi{width:26px;height:26px}
.ctier{min-width:0;font-size:.7rem;padding:2px 4px}
.perk{flex-wrap:wrap}
.achgroup{margin:8px 0 3px;font-size:.78rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.ach{display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;background:#1e1d18;border:1px solid #000;padding:5px 7px;margin-bottom:3px}
.ach .chk{width:14px;height:14px;border:1px solid var(--edge);border-radius:2px;display:grid;place-items:center;font-size:.7rem;color:#000}
.ach.done .chk{background:#7cff6b;border-color:#7cff6b}
.ach b{font-size:.82rem;display:block}
.ach small{font-size:.72rem;opacity:.75}
.ach .ap{font-family:var(--pixel);font-size:.75rem;color:#ffff00}
.ach:not(.done) b{opacity:.85}
.ach .abar{height:4px;background:#15140f;border:1px solid #000;margin-top:3px}
.ach .abar div{height:100%;background:var(--leaf)}
.mlvl{width:26px;height:26px;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:#2a2822;border:1px solid #000;border-radius:50%}
/* v0.9.0: the side panel never makes the page taller than the game + chat; long tabs scroll inside it */
@media (min-width:821px){
  aside{min-height:0}
  aside .tabpanel{flex:1 1 0;min-height:0;overflow-y:auto}
}
/* v0.10.0: Current task window (XP per hour) */
.taskwin{position:absolute;top:34px;left:8px;width:200px;background:rgba(26,25,20,.86);border:2px solid var(--edge);border-radius:3px;box-shadow:0 0 0 1px #000;padding:6px 8px;font-size:.78rem;color:var(--parch);z-index:2}
.taskhead{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.taskhead b{flex:1;color:var(--gold);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.taskhead button{background:none;border:1px solid var(--edge);color:var(--dim);border-radius:2px;width:20px;height:20px;line-height:1;cursor:pointer;padding:0;font-size:.85rem}
.taskhead button:hover{color:var(--gold);border-color:var(--gold)}
.twhat{color:#fff;margin-bottom:4px}
.trow{border-top:1px solid rgba(0,0,0,.5);padding-top:4px;margin-top:4px}
.tsk{display:flex;align-items:center;gap:5px}
.tsk svg{width:16px;height:16px}
.tsk span{margin-left:auto;opacity:.7}
.tgrid{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin-top:2px}
.tgrid span{opacity:.7}
.tgrid b{text-align:right;font-weight:700;color:#ffff9a;font-variant-numeric:tabular-nums}
.ttime,.tidle{opacity:.65;margin-top:4px;font-size:.72rem}
.tidle{margin:0}
@media (max-width:820px){.taskwin{width:170px;font-size:.72rem}}
/* v0.11.0: Stats view, Focus XP section */
.acct.stats{margin:0 0 4px}
.acct.stats dd{font-variant-numeric:tabular-nums}
.focusxp{background:#1e1d18;border:1px solid #000;padding:6px 8px;font-size:.8rem}
.focusxp .trow:first-of-type{border-top:0;margin-top:0;padding-top:0}
/* v0.12.0: Account view mode toggle */
.viewmode{margin:0 0 12px}
.viewmode > span{font-size:.8rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.qviews.vm{grid-template-columns:1fr 1fr;margin:4px 0}
.qviews.vm .btn{grid-column:auto}
/* v0.13.0: inventory tooltip, Focus combat comparison, auto-eat dropdown */
.invtip{position:fixed;z-index:30;pointer-events:none;background:rgba(20,19,15,.95);border:1px solid var(--edge);border-radius:3px;padding:4px 8px;font-size:.82rem;color:var(--parch);box-shadow:0 2px 8px rgba(0,0,0,.5);white-space:nowrap}
.invtip b{color:#ff9a3c}
.invtip .hpafter{color:#7cff6b}
.invtip .gup{color:#7cff6b}.invtip .gdn{color:#ff8a7a}.invtip .gdh{color:#e8b04a}   /* v0.99.41 (Kyle, #59): what wearing an item changes */
.fcmp{width:100%;border-collapse:collapse;font-size:.82rem;margin:2px 0 4px;background:#1e1d18;border:1px solid #000}
.fcmp th,.fcmp td{padding:3px 6px;text-align:right;border-bottom:1px solid rgba(0,0,0,.35)}
.fcmp th:first-child{text-align:left;font-weight:normal;opacity:.75}
.fcmp thead th{font-weight:700;opacity:1;color:var(--gold)}
.fcmp td{font-variant-numeric:tabular-nums}
#optEatPct{margin-left:4px;background:var(--stone-2);color:var(--parch);border:1px solid var(--edge);border-radius:2px;font:inherit;font-size:.85rem}
/* v0.14.0: patch notes, fish kind in menus */
.patchnotes{margin:6px 0 10px;border-top:1px solid #1a1914;padding-top:8px}
.patchnotes summary{cursor:pointer;font-size:.8rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.pn{background:#1e1d18;border:1px solid #000;padding:5px 8px;margin-bottom:4px;font-size:.8rem}
.pn b{color:var(--gold)}
.pn p{margin:2px 0 0;opacity:.85}
.pn.latest{border-color:var(--gold)}
.pnwhen{float:right;font-size:.72rem;opacity:.65}   /* v0.94.3: release date and time */
.pnnew{font-size:.68rem;color:#000;background:var(--gold);border-radius:2px;padding:0 4px;margin-left:4px}
.menu i.fk,.hover i.fk{color:#bfe9ff}
.qty .btn.on:hover{color:#000}
/* v0.16.0: Focus clear button, items per hour */
.focusclear{width:100%;margin:0 0 8px}
#focusXpSec:first-of-type h2.sub2,#tab-focus > #focusXpSec:nth-child(3) h2.sub2{margin-top:0}
.tit{display:flex;align-items:center;gap:4px;opacity:.85}
.tit svg,.tit .pxi{width:15px;height:15px;flex:none}
.tgrid b small{font-weight:400;opacity:.7}
/* v0.19.0: Deposit inventory button, quest filters */
.bankrun{width:100%;margin:0 0 8px}
.bankbtns{display:flex;gap:6px}.bankbtns .bankrun{flex:1 1 auto;width:auto}.bankbtns #bankTabArrange{flex:0 0 auto}
.qfilters{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 8px}
.qfilters .btn{font-size:.78rem;padding:3px 4px}
.qfilters .btn.on{color:#000;background:var(--gold);border-color:var(--gold)}
.qfilters .btn.on:hover{color:#000}

/* v0.24.0: metal tabs on the anvil window */
.metaltabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.metaltabs .btn{padding:2px 9px}
.metaltabs .btn.on,.metaltabs .btn.on:hover{background:var(--gold);color:#000;border-color:var(--gold)}

/* v0.25.0: world boss badge under the minimap, and the "While you were away" window */
/* v0.26.0: world boss HUD; v0.91.2: a compact card tucked under the minimap (below the Tracking badge when there is one) */
.bosshud{position:absolute;top:calc(100% + 28px);right:0;width:150px;z-index:3;
  background:rgba(26,22,20,.9);border:2px solid #8a2a2a;box-shadow:0 0 0 1px #000,0 2px 6px rgba(0,0,0,.4);padding:2px 5px 4px;color:var(--parch);font-size:.7rem}
.trackbadge:not([hidden]) ~ .bosshud{top:calc(100% + 52px)}
.bosshud .bh-row{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:18px}
.bosshud .bh-name{font-weight:700;color:#ffb0a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bosshud .bh-join{flex:none;padding:0 6px;font-size:.65rem;line-height:15px;background:#7a1f1a;border-color:#ff6b5a;color:#fff}
.bosshud .bh-join:hover{background:#a02a22;color:#fff}
.bosshud .bh-bar{position:relative;height:11px;background:#2a1010;border:1px solid #000;overflow:hidden;margin-top:2px}
.bosshud .bh-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(#e0473a,#9c2018);transition:width .3s}
.bosshud .bh-text{position:relative;display:block;text-align:center;font-size:.6rem;line-height:11px;color:#fff;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums}
.bosshud.idle{border-color:var(--edge);padding:2px 6px;text-align:center}
.bosshud.idle .bh-row{justify-content:center}
.bosshud.idle .bh-name{color:var(--parch);font-weight:400}
.bosshud.idle .bh-bar,.bosshud.idle .bh-join{display:none}
/* v0.99.41 (Kyle, #69): an arrow tab on the card's inner edge slides it off the side of the game and back (08b-bosses.js
   setBossHudTucked); tucked away, only the tab shows, at the edge. On a computer the card goes right (the tab is its left
   edge); on phones it goes left (the tab is its right edge, 44px). */
.bosshud{width:136px;transition:transform .25s ease}
.bosshud,.bosshud.idle{padding-left:19px}
.bosshud .bh-tab{position:absolute;top:-2px;bottom:-2px;left:-2px;width:14px;padding:0;border:2px solid #8a2a2a;background:#3a1512;color:#ffb0a0;cursor:pointer;font-size:.7rem;line-height:1;display:flex;align-items:center;justify-content:center}
.bosshud .bh-tab:hover{background:#5a201a;color:#fff}
.bosshud .bh-tab span::before{content:"▸"}
.bosshud.bhoff .bh-tab span::before{content:"◂"}
.mmwrap>#bossHud.bhoff{transform:translateX(calc(100% - 6px))}
@media (prefers-reduced-motion:reduce){.bosshud{transition:none}}
@media (max-width:820px){.bosshud{width:118px;font-size:.62rem;padding:1px 4px 3px}.bosshud .bh-join{padding:0 4px;font-size:.58rem;line-height:13px}.bosshud .bh-row{min-height:15px}.bosshud .bh-text{font-size:.52rem}}
.awaywin{width:min(440px,calc(100% - 24px))}
.awaywin h3{margin:10px 0 4px;font-size:.9rem;color:var(--gold)}
.awaylist{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.awaylist li{display:flex;align-items:center;gap:6px}
.awaylist svg,.awaylist .pxi{width:22px;height:22px;flex:none}
.awaylist .up{color:#9fdc8a}

/* v0.28.0: arrow count on the ammo slot */
.eq{position:relative}
.eq .ammon{position:absolute;left:3px;top:1px;font-size:.65rem;color:#ffe96b;text-shadow:1px 1px 0 #000;pointer-events:none}

/* v0.30.0: the skill unlock list in the Skills tab */
.unlocks{margin-top:10px}
.unlocks h3{margin:0 0 4px;font-size:.85rem;color:var(--gold);display:flex;justify-content:space-between}
.unlocks h3 span{color:var(--dim);font-weight:400;font-size:.75rem}
.unlocks ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.unlocks li{display:grid;grid-template-columns:30px 22px 1fr;gap:6px;align-items:center;padding:2px 4px;background:var(--stone-2);border-radius:2px;font-size:.78rem}
.unlocks li.no{opacity:.55}
.unlocks .lv{font-weight:700;text-align:center;color:#9fdc8a;font-variant-numeric:tabular-nums}
.unlocks li.no .lv{color:#ff8a7a}
.unlocks svg,.unlocks .pxi{width:22px;height:22px}
.unlocks .what b{color:var(--parch);font-weight:600}
.unlocks .what .un[title]{cursor:help}
.unlocks li{padding:1px 4px;line-height:1.25}
.unlocks .what small{display:block;color:var(--dim);font-size:.7rem;line-height:1.2}

/* v0.31.0: farming patches grid in the Focus tab */
.farmgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.farmsum{margin:-2px 0 6px;font-size:.78rem;color:var(--dim)}
.fplot{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px 6px;background:var(--stone-2);border:1px solid #1a1914;border-radius:3px;color:var(--parch);font:inherit;font-size:.68rem;cursor:pointer;min-height:70px}
.fplot:hover{border-color:var(--gold)}
.fplot svg,.fplot .pxi{width:24px;height:24px}
.fplot .ficon{width:24px;height:24px;display:grid;place-items:center;font-size:.9rem}
.fplot b{font-size:.7rem;line-height:1.1;text-align:center}
.fplot small{color:var(--dim);font-variant-numeric:tabular-nums}
.fplot .fnum{position:absolute;top:1px;left:4px;color:var(--dim);font-size:.6rem}
.fplot.ready{border-color:#6fbf5a;background:#24361f}
.fplot.ready small{color:#9fdc8a;font-weight:700}
.fplot.locked{opacity:.5}
.fplot .fbar{position:absolute;left:4px;right:4px;bottom:2px;height:3px;background:#1a1914;border-radius:2px;overflow:hidden}
.fplot .fbar span{display:block;height:100%;background:#7fbf4a}
.farmctl{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.farmctl select{background:var(--stone-2);color:var(--parch);border:1px solid var(--edge);padding:3px 4px;font:inherit;font-size:.8rem}
.farmbtns{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.farmbtns .btn{padding:4px 2px;font-size:.75rem}
.opts label.sub2x{padding-left:44px}

/* v0.37.0: premium shop */
.premium{margin:8px 0 10px}
.premopen{width:100%;background:#4a3a14;border-color:#c9971f;color:#ffe08a}
.premopen:hover{background:#6a5218;color:#fff}
.premitem{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:6px;background:var(--stone-2);border:1px solid #1a1914;border-radius:3px;margin-top:6px}
.premitem .pi{font-size:1.4rem;text-align:center}
.premitem small{display:block;color:var(--dim)}
.premitem .btn{white-space:nowrap}
/* v0.44.0: Online (multiplayer test) section in the Account tab */
.online{margin:10px 0;border:1px solid var(--edge);border-radius:2px;padding:6px 8px;background:#1e1d18}
.online summary{cursor:pointer;font-weight:700;color:var(--gold)}
.netform{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;margin:6px 0}
.netform input{background:#14130f;color:var(--parch);border:1px solid #000;border-radius:2px;padding:4px 6px;font:inherit;min-width:0}
.netbtns{display:flex;flex-wrap:wrap;gap:4px}
#netStatus.ok{color:#7cff6b}

/* v0.45.0: prayer orb (under the HP orb) and the Prayers section of the Worn items tab */
.prayorb{top:56px;color:#9fe9ff;cursor:pointer;font:inherit;font-family:var(--pixel);font-size:.9rem}
.prayorb.on{box-shadow:0 0 0 1px #000,0 0 8px 2px rgba(127,216,240,.7)}
.praybar{height:6px;background:#14130f;border:1px solid #000;border-radius:2px;overflow:hidden;margin-top:4px}
.praybar div{height:100%;background:#7fd8f0;transition:width .3s}
.praygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px;margin:6px 0}
.pray{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:5px;text-align:left;align-items:center;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:4px 6px;color:var(--parch);font:inherit;font-size:.78rem;cursor:pointer}
.pray .pi{grid-row:span 2;font-size:1rem;text-align:center}
.pray small{color:var(--dim);font-size:.68rem;line-height:1.2}
.pray.on{border-color:#7fd8f0;background:#22343a;box-shadow:inset 0 0 0 1px #7fd8f0}
.pray.locked{opacity:.45}
.pray:hover:not(.locked){border-color:var(--gold)}

/* v0.99.41 (Kyle, #63): buffs: one "N buffs" button top left, under the ping bar (offline: in its place), and its dropdown
   (each buff and its time left). Replaces v0.47.0's chips under the orbs. The task window and hover text move down/along. */
.buffbox{position:absolute;top:6px;left:8px;z-index:6;font-size:.72rem;color:var(--parch)}
.game.hasnet .buffbox{top:32px}
.buffbtn{font:inherit;font-size:.72rem;color:var(--parch);background:rgba(26,25,20,.86);border:2px solid var(--edge);box-shadow:0 0 0 1px #000;padding:1px 6px;line-height:16px;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
.buffbtn .bic,.buffbtn b{color:#7cff6b}
.buffbtn:hover,.buffbtn[aria-expanded="true"]{border-color:var(--gold)}
.buffbtn .caret{font-size:.6rem;color:var(--dim)}
.buffdrop{position:absolute;top:calc(100% + 3px);left:0;overflow-y:auto;overscroll-behavior:contain;width:max-content;min-width:200px;max-width:260px;background:rgba(26,25,20,.95);border:2px solid var(--edge);box-shadow:0 0 0 1px #000,0 4px 10px rgba(0,0,0,.5);padding:2px 8px}
.buffrow{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:3px 0}
.buffrow+.buffrow{border-top:1px solid rgba(255,255,255,.12)}
.buffrow .bn{color:#fff;font-weight:700}
.buffrow .bw{grid-column:1;color:var(--dim);font-size:.68rem}
.buffrow .bt{grid-row:1/3;grid-column:2;align-self:center;color:#7cff6b;font-variant-numeric:tabular-nums}
.game.hasnet.hasbuffs .taskwin{top:58px}
.game.hasbuffs:not(.hasnet) .hover{left:110px}

/* v0.49.0: the Premium tab (gold crown in the tab bar), cosmetics and bank search */
.stab.premtab{color:#f0c24f;background:linear-gradient(180deg,#3a2e12,#241d0c);box-shadow:inset 0 0 0 1px #8a6a1f,0 0 8px rgba(240,194,79,.35)}
.stab.premtab svg{filter:drop-shadow(0 0 3px rgba(240,194,79,.8))}
.stab.premtab.on{background:linear-gradient(180deg,#5a4515,#3a2e12);color:#ffe28a}
.premhead{color:var(--gold)}
#premQol .premitem{margin-bottom:4px}
.cosgroup h3{margin:8px 0 4px;font-size:.85rem;color:var(--parch)}
.cosrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:4px}
.cositem{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--stone-2);border:1px solid #1a1914;border-radius:2px;padding:4px;color:var(--parch);font:inherit;font-size:.74rem;cursor:pointer;text-align:center}
.cositem canvas{width:48px;height:56px;image-rendering:pixelated}
.cositem small{color:var(--dim);font-size:.66rem}
.cositem.owned small{color:#9fdc8a}
.cositem.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#2e2715}
.cositem:disabled{opacity:.5;cursor:not-allowed}
.cositem:hover:not(:disabled){border-color:var(--gold)}
.banksearch{background:#14130f;color:var(--parch);border:1px solid #000;border-radius:2px;padding:3px 6px;font:inherit;font-size:.85rem;min-width:0;width:140px}
#bankTabSearch{width:100%;margin:6px 0}

/* v0.49.4: name picker */
.namewin{max-width:360px}
.nameform{display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.nameform input{background:#14130f;color:var(--parch);border:1px solid #000;border-radius:2px;padding:6px 8px;font:inherit;font-size:1.05rem}
#nameErr{color:#ff8a7a;min-height:1em}

/* v0.50.0: the account screen (blocks the game until you create an account or log in) */
.authgate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(ellipse at center,rgba(30,28,22,.92),rgba(10,9,7,.97));backdrop-filter:blur(3px);overflow:auto}
.authgate[hidden]{display:none}
.authbox{width:min(400px,100%);background:var(--stone);border:3px solid var(--edge);border-radius:4px;box-shadow:0 0 0 1px #000,0 12px 40px rgba(0,0,0,.6);padding:18px 20px;color:var(--parch)}
.authlogo{font-family:var(--logo);font-size:2.2rem;color:var(--gold);text-align:center;text-shadow:2px 2px 0 #000;margin-bottom:2px}
.authagree{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;margin:8px 0 4px;cursor:pointer}   /* v0.99.70: the age check and legal links */
#authForm .authagree,.authdobgate .authagree{font-weight:400;font-size:.85rem}
#authForm .authagree input,.authdobgate .authagree input{width:auto;padding:0;margin-top:3px;accent-color:var(--gold)}
.authdobgate label{font-weight:700;font-size:.9rem;margin-top:6px}
.authagree a,.authlegal a{color:var(--gold)}
.authlegal{text-align:center;font-size:.8rem;opacity:.8;margin:12px 0 0}
.authdobgate{display:grid;gap:4px}
.authtag{text-align:center;font-style:italic;opacity:.75;margin:0 0 10px}   /* v0.99.70: the Evermarch tagline */
.authtabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:10px}
.authtabs .btn.on{background:var(--gold);color:#1b1a16}
.authbox h2{margin:4px 0 10px;font-size:1.05rem;color:var(--parch)}
#authForm{display:flex;flex-direction:column;gap:4px}
#authForm label{font-weight:700;font-size:.9rem;margin-top:6px}
#authForm input,.authdev input,.authdobgate input{background:#14130f;color:var(--parch);border:1px solid #000;border-radius:2px;padding:7px 9px;font:inherit;font-size:1rem}
#authForm input:focus,.authdobgate input:focus{outline:2px solid var(--gold);outline-offset:0}
#authEmailRows{display:flex;flex-direction:column;gap:4px}
.authnote{color:var(--dim);font-size:.78rem;margin:2px 0 0}
.opt{color:var(--dim);font-weight:400}
.autherr{color:#ff8a7a;min-height:1.2em;font-size:.85rem;margin:6px 0 0}
.authgo{margin-top:6px;padding:9px;font-size:1rem;background:var(--gold);color:#1b1a16;font-weight:700}
.linkbtn{background:none;border:0;color:var(--gold);text-decoration:underline;cursor:pointer;font:inherit;font-size:.82rem;margin-top:6px;align-self:center}
.authoffline{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.authdev{margin-top:10px;font-size:.8rem;color:var(--dim)}
.authdev input{width:100%;margin-top:4px;font-size:.85rem}

/* v0.52.0: PIXEL ART. Icons are drawn with hard edges (no anti-aliasing) to match the pixel-art world. */
svg { shape-rendering: crispEdges; }
canvas#minimap, canvas#bigMap { image-rendering: pixelated; }

/* ---------- v0.55.0: PIXEL-ART INTERFACE ----------
   Square corners, chunky 1-pixel bevels (light top-left, dark bottom-right) on panels, slots, buttons and tabs, like an
   old RPG menu. Round things (minimap, orbs) stay round. Long text keeps the easy-to-read font. */
:root{--hi:rgba(255,240,200,.14);--lo:rgba(0,0,0,.45)}
*:not(.minimap):not(.mmn):not(.mmexp):not(.hporb):not(.lvlbadge):not(.orb):not(.orb *){border-radius:0!important}
.panel,.stabs,.mapwin,.game{border-color:#6b5f42;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 0 0 2px #000}
.slot,.bslot{background:#24231c;border:2px solid #14130f;box-shadow:inset 2px 2px 0 rgba(0,0,0,.35),inset -1px -1px 0 var(--hi)}
.slot:hover,.bslot:hover{border-color:var(--gold)}
.btn{border:2px solid #14130f;background:#3d3a2e;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo);padding:3px 10px;letter-spacing:.02em}
.btn:hover{background:#4a4636;color:var(--gold)}
.btn:active{box-shadow:inset 2px 2px 0 var(--lo),inset -2px -2px 0 var(--hi)}
.stab{border-right:2px solid #14130f;box-shadow:inset 1px 1px 0 var(--hi)}
.stab.on,.stab[aria-selected="true"]{background:#3d3a2e;box-shadow:inset 2px 2px 0 var(--lo)}
h2,h3,summary,.st,.price,.n,label{font-family:var(--pixel)}
.slot svg,.bslot svg,.stab svg,.slot .pxi,.bslot .pxi{image-rendering:pixelated;shape-rendering:crispEdges}

/* v0.63.0: recovery email in the Account tab */
.emailrow{display:grid;grid-template-columns:1fr auto;gap:4px 6px;margin-top:6px}
.emailrow label{grid-column:1/-1;font-size:.8rem;color:var(--dim)}
.emailrow input{min-width:0;font:inherit;padding:4px 6px;background:#1c1a17;color:inherit;border:1px solid #4a4236}
.emailrow .note{grid-column:1/-1;margin:0}

/* v0.65.0: tab sections. Collapsible groups (Equipment, Account) and grouped settings, styled like the section headings */
details.grp{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:6px}
details.grp>summary{cursor:pointer;list-style:none;font-family:var(--pixel);text-transform:uppercase;letter-spacing:.08em;font-size:.88rem;color:var(--dim);padding:2px 0 6px}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary::before{content:"▸";display:inline-block;width:1.1em;color:var(--gold)}
details.grp[open]>summary::before{content:"▾"}
details.grp>summary:hover,details.grp>summary:focus-visible{color:var(--parch)}
.opts h3.optgrp{font-family:var(--pixel);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--dim);font-weight:normal;margin:12px 0 2px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.opts h3.optgrp:first-child{margin-top:0;border-top:0;padding-top:0}
#tab-quests .qviews{grid-template-columns:1fr 1fr}
#tab-progress .pviews{grid-template-columns:repeat(3,1fr)}#tab-progress .pviews .btn{grid-column:auto}
#tab-quests .qviews .btn{grid-column:auto}
/* v0.66.0: pets (Equipment tab) and the gathering bag window */
.petgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.petcard{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;background:#1c1a17;border:1px solid #3a342c;color:var(--parch);font:inherit;cursor:pointer}
.petcard canvas{width:40px;height:40px;image-rendering:pixelated}
.petcard b{font-size:.78rem}.petcard small{font-size:.62rem;color:var(--dim);text-align:center;line-height:1.15}
.petcard.locked{opacity:.45;cursor:default}.petcard.locked canvas{background:#111}
.petcard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.bagwin .qty{flex-wrap:wrap}
.bagwin #bagEmpty{margin-left:auto}
/* v0.68.0: trade window */
.tradecols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tradecols h3{font-family:var(--pixel);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin:4px 0}
.tradecols .bankgrid{min-height:96px;grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}
.tradegold{display:flex;gap:6px;align-items:center;font-size:.85rem;color:var(--gold);margin:6px 0 0}
.tradegold input{width:100%;min-width:0;font:inherit;padding:3px 5px;background:#14130f;color:var(--parch);border:1px solid #000}
.tradestatus{text-align:center;margin:8px 0 4px;color:var(--parch)}.tradestatus.them{color:#7cff6b}
.tradebtns{display:flex;gap:8px;justify-content:center}.tradebtns .btn{min-width:110px}
/* v0.69.0: menu rework. Labelled two-row tab bar, a title bar with the tab's icon on every panel,
   and sections drawn as cards so each tab reads as a few clear blocks */
.stabs{grid-template-columns:repeat(6,1fr)}   /* v0.99.23: 11 tabs, 6 + 5; v0.99.75: 12, 6 + 6 (the Progress tab) */
.stab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px 5px;border-bottom:2px solid #14130f;min-width:0}
.stab:nth-child(6n){border-right:0}
.stab:nth-child(n+7){border-bottom:0}
.stab svg{width:18px;height:18px}
.stab .slbl{font-size:.68rem;line-height:1;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stab.on .slbl{color:var(--gold);font-weight:700}
.stab.premtab .slbl{color:#f0c24f}
.tabpanel>h2.phead{display:flex;align-items:center;gap:8px;margin:-10px -12px 10px;padding:8px 12px;background:linear-gradient(180deg,#3a372b,#2b2920);border-bottom:2px solid #14130f;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);color:var(--gold);font-size:1.02rem}
.tabpanel>h2.phead .phico{width:18px;height:18px;flex:none;color:var(--gold)}
.tabpanel>h2.phead .count{margin-left:auto;font-family:inherit;font-size:.8rem;color:var(--parch);letter-spacing:0;text-transform:none}
.tabpanel>h2.phead.premhead{background:linear-gradient(180deg,#4a3a14,#2e250d);color:#ffe28a}
details.grp,details.online{background:#24221b;border:1px solid #14130f;border-radius:4px;padding:6px 10px 8px;margin-top:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
details.grp>summary,details.online>summary{color:var(--parch);padding:2px 0}
details.grp[open]>summary,details.online[open]>summary{border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:8px;padding-bottom:6px}
.opts{display:flex;flex-direction:column;gap:2px}
.opts h3.optgrp,.opts h3.optgrp:first-child{background:#24221b;border:1px solid #14130f;border-radius:4px 4px 0 0;color:var(--gold);margin:12px 0 0;padding:6px 10px}
.opts h3.optgrp:first-child{margin-top:0}
.tabpanel h2.sub2{background:#24221b;border:1px solid #14130f;border-radius:4px;color:var(--gold);padding:6px 10px;margin-top:14px !important}
.tabpanel .note{border-left:2px solid rgba(232,192,96,.25);padding-left:8px}
.danger{margin-top:16px;padding:10px;border:1px solid #5a2620;border-radius:4px;background:rgba(90,38,32,.15)}
/* v0.69.0: quest givers + tracking. "Given by" line and Track button on each quest; the tracking badge under the minimap */
.quest .qgiver{font-size:.78rem;color:var(--dim);margin:2px 0 4px}
.quest .qgiver b{color:#b9b9b9;font-weight:700}
.quest .qhead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.quest .qtrack{flex:none;font-size:.72rem;padding:2px 8px;margin-top:2px}
.quest .qtrack.on{background:#5a4515;color:#ffe28a;border-color:#ffd23f}
.quest.tracked{box-shadow:inset 0 0 0 1px rgba(255,210,63,.55)}
.trackbadge{position:absolute;top:calc(100% + 28px);right:0;max-width:200px;background:#3a2e12;border:2px solid #8a6a1f;border-radius:10px!important;padding:1px 4px 1px 8px;box-shadow:0 0 0 1px #000;font-size:.72rem;color:#ffe28a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:3}
.trackbadge .tq{font-weight:700}
.trackbadge .tx{background:none;border:0;color:#ffe28a;cursor:pointer;font-size:.85rem;padding:0 2px;line-height:1}
.trackbadge .tx:hover{color:#fff}
/* v0.72.0: status dots (green online, red away/ghost) in the friends list */
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%!important;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 1px #000}
.sdot.on{background:#3ddc4f}.sdot.away{background:#e0b33a}.sdot.ghost{background:#e0b33a}
.flist .fst small{color:var(--dim);font-size:.72rem}

/* v0.74.0: long press opens the right-click menu on touch screens: no text selection or phone pop-up in the way */
#world,.slot,.bslot,.stab,.inv,.bankgrid,.equip,.toolgrid,.quest,.flist li{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* v0.74.0: tutorial quest checklists */
.quest .qsteps{list-style:none;margin:4px 0 6px;padding:0;font-size:.82rem}
.quest .qsteps li{padding:2px 0;color:var(--parch)}
.quest .qsteps li.ok{color:#7cff6b;opacity:.85}
.bosshud[hidden]{display:none!important}
/* v0.75.0: NPC dialogue box over the chat log (js/13j-dialogue.js), and the Dialogue log tab */
.chatarea{position:relative;display:flex;flex-direction:column}
.dlg{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:8px 40px 8px 12px;background:#d8c99f;border-bottom:1px solid #a8996f;cursor:pointer;z-index:2;outline:none}
.dlg[hidden]{display:none}
.dlgface{width:80px;height:80px;flex:none;image-rendering:pixelated;background:#c4b384;border:2px solid #8a7a50;border-radius:3px!important;box-shadow:inset 0 0 0 1px #e8dcb6}
.dlgbody{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.dlgbody b{color:#7a1e00;font-size:1rem}
.dlgbody p{margin:0;color:#1d1a10;font-size:.95rem;line-height:1.35;overflow-wrap:anywhere}
.dlgmore{color:#0a2f8a;font-size:.82rem;font-weight:700}
.dlg:hover .dlgmore,.dlg:focus .dlgmore{text-decoration:underline}
.dlgx{position:absolute;top:4px;right:6px;background:none;border:0;font-size:1.1rem;color:#5a4a2a;cursor:pointer}
.chat .npc .who{color:#7a1e00}
.chat .npc .said{color:#1d1a10}
.chat .qhead{color:#5a4a2a;font-weight:700;border-top:1px dashed #a8996f;margin-top:4px!important;padding-top:2px}
@media (max-width:820px){.dlgface{width:56px;height:56px}.dlg{padding:6px 34px 6px 8px;gap:8px}}
/* v0.76.0: the Index (js/13k-index.js) */
.mmidx{left:auto;right:-2px}
.wikiwin{width:min(860px,calc(100% - 24px));display:flex;flex-direction:column;z-index:6}
.wikiwin .bankhead{gap:8px}
.wikiwin .banksearch{flex:1;min-width:120px;margin:0}
.wkback{font-size:1.3rem;line-height:1}
.wikif{margin:6px 0 8px;flex-wrap:wrap}
.wikibody{display:grid;grid-template-columns:minmax(180px,34%) 1fr;gap:10px;min-height:0;height:min(56vh,460px)}
.wikilist{overflow-y:auto;background:#1e1d18;border:1px solid #14130f;padding:4px}
.wikilist button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.04);color:var(--parch);padding:4px 6px;cursor:pointer;font:inherit;font-size:.85rem}
.wikilist button:hover,.wikilist button.on{background:#3a372b;color:var(--gold)}
.wikilist svg,.wikidetail .wic svg,.wikilist .pxi,.wikidetail .wic .pxi{width:24px;height:24px;flex:none}
.wikilist small{margin-left:auto;color:var(--dim);font-size:.7rem;white-space:nowrap}
.wikilist button{content-visibility:auto;contain-intrinsic-size:auto 24px}   /* (efficiency pass) rows scrolled out of view skip layout: the Index opens faster */
/* v0.99.39 (Kyle, #32): monster pictures (13k-index.js monPic), whole art pixels, never smoothed */
.wkmon{width:32px;height:32px;flex:none;image-rendering:pixelated;margin:-4px 0}
img.wkmon:not([src]){visibility:hidden}
.wikidetail .wkmon.big{width:64px;height:64px;margin:0;background:radial-gradient(ellipse at 50% 80%,rgba(255,255,255,.07),transparent 70%)}
.wkbadge{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%!important;font-size:.8rem;font-weight:700;color:#000}
.wikidetail{overflow-y:auto;background:#24221b;border:1px solid #14130f;padding:10px 12px;font-size:.86rem}
.wikidetail h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;color:var(--gold);font-size:1.1rem}
.wikidetail .wic svg,.wikidetail .wic .pxi{width:34px;height:34px}
.wikidetail .wkex{color:var(--dim);font-style:italic;margin:0 0 8px}
.wikidetail h4{margin:12px 0 4px;color:var(--parch);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:3px}
.wikidetail table{width:100%;border-collapse:collapse}
.wikidetail td{padding:3px 4px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:top}
.wikidetail td.r{text-align:right;white-space:nowrap;color:var(--gold);font-weight:700}
.wikidetail td.ic{width:26px}.wikidetail td.ic svg,.wikidetail td.ic .pxi{width:22px;height:22px}
.wikidetail a{color:#9fd8ff;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(159,216,255,.35)}
.wikidetail a:hover{color:#fff}
.wikidetail .wkstats{display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0}
.wikidetail .wkstats b{color:var(--gold)}
.wikidetail .muted{color:var(--dim)}
.wikiempty{color:var(--dim);padding:10px;font-size:.85rem}
@media (max-width:820px){.wikibody{grid-template-columns:1fr;height:auto}.wikilist{max-height:30vh}.wikidetail{max-height:44vh}}
/* v0.83.0: bank tabs and organising (13n-bankorg.js) */
.btabs{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 0}
.btab{min-width:34px;height:30px;padding:0 6px;background:#2a2820;border:1px solid #000;border-bottom:none;color:var(--parch);font:inherit;font-size:.8rem;cursor:pointer;border-radius:3px 3px 0 0;display:flex;align-items:center;justify-content:center}
.btab svg,.btab .pxi{width:22px;height:22px}
.btab.on{background:#1e1d18;color:#ffd77a}
.btab.add{color:#9a9178}
.btab.dropover,.bslot.dropover{outline:2px dashed #ffd77a;outline-offset:-2px}
.bslot.moving{outline:2px solid #ffd77a;outline-offset:-2px;opacity:.6}
/* v0.83.0: finding a guild, applications, guild settings (13m-guild.js) */
.gfindbar{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:4px 0;font-size:.85rem}
.gfind .fname small{display:block;opacity:.75}
.gfind.closed{opacity:.7}
.btn.gapp{flex:0 0 auto;font-size:.8rem;padding:3px 8px}
.btn.gapp:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.gsettings{margin:8px 0;border:1px solid var(--edge);padding:4px 8px;border-radius:2px}
.gsettings summary{cursor:pointer;font-weight:700}
.gopen{display:block;margin:6px 0}
.gperms{width:100%;border-collapse:collapse;font-size:.78rem}
.gperms th{font-weight:600;padding:2px;text-align:center}
.gperms td{padding:3px 2px;border-top:1px solid rgba(255,255,255,.07)}
.gperms td:not(:first-child){text-align:center;width:3.6em}
.gpermbtns{display:flex;gap:6px;margin-top:6px}
#guildCreate{flex-wrap:wrap}#guildCreate #guildName{flex:1 1 100%}#guildCreate .btn{flex:1}
.note.gwait{color:#e8a35a}
/* v0.85.0: achievement rewards, mastery perk groups */
.achrewards{border:1px solid var(--edge);padding:4px 8px;margin:4px 0 8px;border-radius:2px}
.achrewards h4{margin:2px 0 4px;font-size:.85rem}
.achrewards ul{list-style:none;margin:0;padding:0;font-size:.78rem}
.achrewards li{padding:1px 0;opacity:.8}
.achrewards li.done{opacity:1;color:#8fd46a}
.achgroup small{font-weight:400;opacity:.75;margin-left:6px}
.ach .acat{font-size:.68rem;opacity:.6;font-weight:400}
.ach .arew{display:block;color:#e8c46a;font-style:normal}
.perkgrp{margin:8px 0 4px;font-size:.85rem}
/* v0.86.0: progress checklists (quests, achievements): finished parts green and struck through */
.qcheck{list-style:none;margin:4px 0 6px;padding:0;font-size:.8rem}
.qcheck li{padding:1px 0;color:var(--parch)}
.qcheck li.ok{color:#7cdc5a}
.qcheck li.ok span{text-decoration:line-through;text-decoration-thickness:1.5px}
.qcheck .carry{color:#7cff6b;font-style:normal}
.qreqh{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-top:4px}
.aprog{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:.72rem}
.aprog .bar{flex:1;margin:0}
.aprog span{opacity:.85;white-space:nowrap}
.chat .who.botwho{color:#a67c00}   /* v0.87.0: townsfolk bots (v0.92.1: in yellow) */
/* v0.87.0: hiscores window (13o-hiscores.js) */
.mmhs{left:auto;right:-2px;bottom:auto;top:18px}
.hswin .hsbody{grid-template-columns:minmax(170px,32%) 1fr}
.hswin.hsone .hsbody{grid-template-columns:1fr}
.hswin .wikilist button{gap:6px}
.hswin .wikilist svg,.hswin .wikilist .pxi{width:22px;height:22px}
.hsic{width:22px;text-align:center;color:var(--gold);flex:none}
.hsn{flex:1;display:flex;flex-direction:column;line-height:1.15}
.hsn small{opacity:.65;font-size:.7rem}
.hsrk{font-size:.72rem;color:var(--gold);opacity:.9}
.hsdetail{overflow-y:auto;background:#1e1d18;border:1px solid #14130f;padding:8px 10px;min-height:0}
.hsdetail h3{margin:0 0 4px}
.hsyou{margin:0 0 6px;font-size:.85rem}
.hstable{width:100%;border-collapse:collapse;font-size:.82rem}
.hstable th{text-align:left;font-weight:600;opacity:.75;border-bottom:1px solid var(--edge);padding:3px 4px}
.hstable td{padding:3px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.hstable td:first-child,.hstable th:first-child{width:3.5em;color:var(--gold)}
.hstable tr.me td{background:rgba(232,196,106,.15);font-weight:700}
.hspager{display:flex;justify-content:space-between;gap:6px;margin-top:6px}
@media (max-width:640px){.hswin .hsbody{grid-template-columns:1fr;height:auto}.hswin .wikilist{max-height:180px}}
/* v0.88.0: story quests and skill locks */
.qcheck .qfuture{opacity:.6}
.sklock{background:rgba(232,196,106,.12);border:1px solid rgba(232,196,106,.4);padding:4px 6px;margin-bottom:6px;border-radius:2px}

/* v0.92.3: ping and player count, top-left of the game screen (the hover text moves along to make room) */
.netbar{position:absolute;top:6px;left:8px;z-index:5;display:flex;gap:4px;align-items:flex-start;font-size:.72rem;color:var(--parch)}
.netbar>.ping,.netbar>.pcount{background:rgba(26,25,20,.86);border:2px solid var(--edge);box-shadow:0 0 0 1px #000;padding:1px 6px;line-height:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.netbar .ping b,.netbar .pcount b{color:#fff}
.netbar .pdot{display:inline-block;width:7px;height:7px;border-radius:50%!important;margin-right:4px;vertical-align:middle;background:#777;box-shadow:0 0 0 1px #000}
.netbar .pdot.good{background:#3ddc4f}.netbar .pdot.ok{background:#e0b33a}.netbar .pdot.bad{background:#e5413a}
.netbar .pcount{cursor:pointer;color:var(--parch);font:inherit;font-size:.72rem}
.netbar .pcount:hover,.netbar .pcount[aria-expanded="true"]{border-color:var(--gold)}
.netbar .caret{font-size:.6rem;color:var(--dim)}
.netbar .pdrop{position:absolute;top:calc(100% + 3px);left:0;min-width:180px;background:rgba(26,25,20,.95);border:2px solid var(--edge);box-shadow:0 0 0 1px #000,0 4px 10px rgba(0,0,0,.5);padding:4px 8px}
.netbar .pdrop div{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.netbar .pdrop b{color:#fff;font-variant-numeric:tabular-nums}
.netbar .pdrop .tot{border-top:1px solid rgba(255,255,255,.12);margin-top:2px;padding-top:4px}
.netbar .pdrop .acc{color:var(--dim)}
.game.hasnet .hover{left:170px}
.game.hasnet .taskwin{top:34px}

/* v0.92.4: "the server is restarting / Evermarch has been updated: refresh" */
.updwin{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(10,9,7,.6)}
.updwin[hidden]{display:none}
.updbox{width:min(360px,calc(100% - 32px));background:var(--stone);border:2px solid var(--gold);box-shadow:0 0 0 1px #000,0 8px 24px rgba(0,0,0,.6);padding:14px 16px;text-align:center;color:var(--parch)}
.updbox h2{margin:0 0 8px;color:var(--gold);font-size:1.05rem}
.updbox p{margin:0 0 12px;font-size:.85rem;line-height:1.4}
.updwin.waiting .btn{display:none}

/* v0.92.6: dialogue topics */
.dlgchoices{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:2px}
.dlgopt{background:none;border:0;padding:1px 0;color:#0a2f8a;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;text-align:left}
.dlgopt:hover,.dlgopt:focus-visible{text-decoration:underline;color:#7a1e00}

/* v0.92.6: "What's new" after an update */
.notesbox{width:min(440px,calc(100% - 32px));text-align:left}
.notesbox h2{text-align:center}
.noteslist{max-height:min(320px,55vh);overflow:auto;margin-bottom:12px;padding-right:4px}
.noteslist .nv{margin:0 0 10px}
.noteslist .nv b{display:block;color:var(--gold);font-size:.8rem;margin-bottom:2px}
.noteslist .nv p{margin:0;font-size:.82rem;line-height:1.45}
.notesbox .btn{display:block;margin:0 auto}

/* v0.93.0: bank "Arrange all" */
.btab.arrange{margin-left:auto;width:auto!important;padding:0 8px;font-size:.72rem;white-space:nowrap}

/* v0.93.0: "X" quantity prompt */
.qtyxwin .updbox{text-align:center}
.qtyxwin label{display:block;margin-bottom:8px;font-size:.88rem}
.qtyxwin input{width:140px;font:inherit;padding:4px 6px;background:#14130f;color:var(--parch);border:1px solid var(--edge)}
.qtyxbtns{display:flex;gap:8px;justify-content:center;margin-top:10px}

/* v0.93.0: chat filters */
.tabs{position:relative}
@media (max-width:400px){.tabs{flex-wrap:wrap}.tabs>.tab{flex:1 0 auto;padding:5px 6px;border-bottom:1px solid #1a1914}}   /* v0.99.17: the chat tabs made the page wider than small phones */
.tab.tabset{flex:0 0 34px}
.tab.muted{text-decoration:line-through;opacity:.6}
.chatset{position:absolute;right:4px;bottom:calc(100% + 4px);z-index:6;min-width:220px;background:var(--stone);border:2px solid var(--edge);box-shadow:0 0 0 1px #000,0 4px 12px rgba(0,0,0,.5);padding:6px 8px;color:var(--parch);font-size:.8rem}
.chatset>b{display:block;margin-bottom:4px;color:var(--gold)}
.chatset .csrow{display:flex;align-items:center;gap:4px;padding:2px 0}
.chatset .csrow span{flex:1}
.chatset .btn{padding:0 6px;font-size:.72rem}
.chatset .btn.on{background:var(--gold);color:#000;border-color:var(--gold)}
.chatset .note{margin:6px 0 0;font-size:.7rem}
.kby{color:#d2493a}
/* v0.93.1: the buttons around the minimap get a gold ring, so they read as buttons */
.mmexp{border-color:#c9a23a;box-shadow:0 0 0 1px #000,0 0 4px rgba(240,194,79,.45)}
.mmexp:hover,.mmexp:focus-visible{border-color:#ffe28a;box-shadow:0 0 0 1px #000,0 0 7px rgba(255,226,138,.8)}
button.hporb.prayorb{border-color:#c9a23a!important}
button.hporb.prayorb:hover{border-color:#ffe28a}
.netbar .pcount{border-color:#c9a23a}

/* v0.97.3: the Feedback menu button (header) and window */
.fbbtn{margin-left:auto;align-self:center;font-size:.85rem;padding:3px 10px;border-color:var(--gold);color:var(--gold)}   /* v0.99.9 (Kyle): gold border and text */
.fbbtn:hover{border-color:#ffe08a;color:#ffe08a}
#fbForm label{display:flex;flex-direction:column;gap:3px;font-size:.9rem;color:var(--parch)}
#fbForm select,#fbForm textarea,#fbForm label input{background:#14130f;color:var(--parch);border:1px solid #000;border-radius:2px;padding:6px 8px;font:inherit;font-size:.95rem}
#fbForm textarea{resize:vertical;min-height:90px}

/* v0.99.0: the item you're using (13u-use.js) */
.slot.using{outline:2px solid #ffd84a;outline-offset:-2px;filter:brightness(1.25)}

/* v0.99.3: dragging items around the inventory (13v-invdrag.js) */
.inv .slot{touch-action:pan-y}   /* v0.99.6: up/down still scrolls the page on phones; sideways starts a drag */
.slot.dragging>*{opacity:.25}
.slot.dragover{border-color:var(--gold);box-shadow:inset 0 0 0 2px rgba(232,196,106,.45)}
.invghost{position:fixed;z-index:9999;pointer-events:none;display:grid;place-items:center;opacity:.9;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.invghost svg,.invghost .pxi{width:80%;height:80%;image-rendering:pixelated}
.invghost .n{position:absolute;top:0;left:2px;font-family:var(--pixel);font-size:.66rem;color:#ffff00;text-shadow:1px 1px 0 #000}
body.invdrag,body.invdrag *{cursor:grabbing!important}

/* v0.99.4: characters (Account tab → Characters, 13w-chars.js) and the Lone Oath hiscores toggle */
.charrow,.charslot{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:4px 0;background:rgba(0,0,0,.18);border:1px solid #14130f}
.charslot{flex-wrap:wrap}
.charrow.here{border-color:var(--gold)}
.charinfo{flex:1;min-width:0}
.charinfo small,.charslot small{display:block;opacity:.75;font-size:.72rem;width:100%}
.charhere{color:var(--gold);font-weight:bold}
.charkind{font-size:.66rem;padding:1px 5px;border-radius:2px;background:#3a382c;color:#e8e2c8;vertical-align:1px;white-space:nowrap}
.charkind.ck-iron{background:#4a5058;color:#e6ebf0}
.charkind.ck-prem{background:#5a4416;color:#ffe08a}
.charform{display:flex;gap:6px;width:100%}
.charform input{flex:1;min-width:0}
.hsmode{margin-top:4px}
.hsmode[hidden]{display:none}

/* v0.99.5: rank icons before names (admin crown, Lone Oath helmet: 13x-ranks.js) */
.rankic{display:inline-block;vertical-align:-1px;margin-right:3px;line-height:0}
.rankic>svg{width:auto;height:12px;image-rendering:pixelated}

/* v0.99.7: player icons (Account tab → Player Icons, Premium tab → Player icons: 13y-icons.js) */
.icongrid{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.iconpick{display:flex;align-items:center;gap:6px;padding:5px 8px;min-height:32px;background:rgba(0,0,0,.18);border:1px solid #14130f;color:var(--text,#e8e2c8);cursor:pointer;font:inherit;font-size:.8rem}
.iconpick.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.iconpick .rankic{margin:0}
.iconpick .rankic>svg{height:16px}
.iconlocked{opacity:.55}
.iconnote{font-size:.74rem;opacity:.8;margin:4px 0}
.premitem .pi .rankic>svg{height:20px}

/* v0.99.8: the cosmetic mount slot (Tools, next to Mount), purple like the cosmetic gear slots */
.eq.cosslot{background:#2c2338;border-color:#7d5aa8;color:#cfa8ff}
.eq.cosslot.has{border-color:#b48ad8}

/* v0.99.9 (Kyle): the minimap can be hidden (bottom-left button); the Map button (top-left) opens the world map.
   Hidden: the orbs and buttons stack in a column down the right edge. */
.mmmap{left:6px;right:auto;bottom:auto;top:-4px}
.mmtog .ic-show{display:none}
.mmwrap.mmoff{width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none}
.mmwrap.mmoff>*{pointer-events:auto}   /* v0.99.17: the empty space around the buttons lets clicks through to the game */
.mmwrap.mmoff .minimap,.mmwrap.mmoff .mmn{display:none}
.mmwrap.mmoff .mmtog .ic-hide{display:none}.mmwrap.mmoff .mmtog .ic-show{display:block}
.mmwrap.mmoff>.mmexp,.mmwrap.mmoff>.hporb,.mmwrap.mmoff>.lvlbadge,.mmwrap.mmoff>.trackbadge,.mmwrap.mmoff>.bosshud{position:static;transform:none;left:auto;right:auto;top:auto;bottom:auto}
.mmwrap.mmoff>.mmexp{width:30px;height:30px}
.mmwrap.mmoff>.mmtog{order:1}.mmwrap.mmoff>.mmmap{order:2}.mmwrap.mmoff>.mmhs{order:3}.mmwrap.mmoff>.mmidx{order:4}
.mmwrap.mmoff>#hpOrb{order:5}.mmwrap.mmoff>#prayOrb{order:6}
.mmwrap.mmoff>.lvlbadge{order:8}.mmwrap.mmoff>.trackbadge{order:9}.mmwrap.mmoff>.bosshud{order:10}
/* v0.99.45 (#72): the boss card stays the box its arrow tab sits in (static, the tab stretched down the whole button column) */
.mmwrap.mmoff>.bosshud{position:relative}

/* v0.99.12: the character creator / barber window (13z-looks.js) */
.lookwin{width:min(560px,calc(100% - 24px))}
/* v0.99.17 (Kyle): on phones the creator / barber fills the screen, the preview is smaller and the button stays in reach */
@media (max-width:820px){
  .lookwin{position:fixed;inset:0;transform:none;width:auto;max-height:none;border-radius:0;z-index:60;padding:8px 10px;display:flex;flex-direction:column}
  .lookwin .lookbody{flex:1;padding:4px 2px 0}
  .lookwin .lookmain{justify-content:center}
  .lookwin .lookstage canvas{width:112px;height:auto}
  .lookwin .lookrows{min-width:0;flex-basis:100%}
  .lookwin .lookgo{position:sticky;bottom:0;align-self:stretch;padding:12px 16px;margin-top:4px;z-index:1;box-shadow:0 -8px 12px var(--stone)}
}
.lookbody{padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px}
.looknamerow{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center}
.looknamerow label{font-weight:bold;color:var(--gold)}
.looknamerow input{font:inherit;padding:5px 8px;min-width:0}
.looknamerow .note{grid-column:1/-1;margin:0}
.lookbad{color:#ff8a7a!important}.lookgood{color:#8fe08a!important}
.lookmain{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.lookstage{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(0,0,0,.25);border:1px solid #14130f;padding:6px;flex:none}
.lookstage canvas{image-rendering:pixelated;width:160px;height:150px}
.lookturn{display:flex;gap:6px}
.lookrows{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.lookrow{display:flex;flex-direction:column;gap:3px}
.lookl{font-size:.75rem;color:var(--dim,#b9b9a8);text-transform:uppercase;letter-spacing:.06em}
.lookopts{display:flex;flex-wrap:wrap;gap:4px}
.lsw{width:22px;height:22px;border:2px solid #14130f;cursor:pointer;padding:0}
.lsw.on{outline:2px solid var(--gold);outline-offset:1px}
.lopt{font:inherit;font-size:.78rem;padding:3px 8px;border:1px solid #14130f;background:var(--stone-2);color:var(--parch);cursor:pointer}
.lopt.on{border-color:var(--gold);color:var(--gold)}
.lsw.locked,.lopt.locked{opacity:.35;cursor:help;background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(0,0,0,.45) 4px 6px)}   /* Pip's quests unlock these */
.looklock{font-size:.72rem;margin:0}
.lookgo{align-self:flex-end;padding:6px 16px}

/* v0.99.13: the level badge under the minimap is gone (the level is in "Tile x, y, z", bottom right): move up what sat under it */
.mmwrap:not(.mmoff)>.trackbadge{top:calc(100% + 4px)}
.mmwrap:not(.mmoff)>.bosshud{top:calc(100% + 4px)}
.mmwrap:not(.mmoff)>.trackbadge:not([hidden]) ~ .bosshud{top:calc(100% + 28px)}

/* v0.99.13: Combat automation, under the inventory */
.combatauto{margin-top:8px}
.combatauto summary .count{font-size:.75rem}
.castats{display:grid;gap:2px;margin:4px 0 8px;padding:6px 8px;background:rgba(0,0,0,.18);border:1px solid #14130f}
.castat{display:flex;justify-content:space-between;gap:10px;font-size:.8rem}.castat span{opacity:.75}.castat b{font-weight:normal;color:var(--gold);text-align:right}

.zoomrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0}.zoomrow .btn{min-width:30px;padding:2px 8px}.zoomrow b{min-width:42px;text-align:center}.zoomrow .note{margin:0}

.pttag,.ptwho{color:#5aa9ff!important;font-weight:700}   /* v0.99.21: playtesters in chat */

/* v0.99.21: the Activity tab's Now card (tracker) */
.thead{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:4px}.thead .twhat{font-weight:700}
.thead .ttime{white-space:nowrap;color:var(--dim,#b9b9a8);font-variant-numeric:tabular-nums}
.tbar{height:6px;background:#1b1a14;border:1px solid #000;margin:3px 0 4px;position:relative}.tbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#7fd06a,#3f9a35)}
.tgoal{margin:4px 0 6px;padding:4px 6px;background:rgba(240,194,79,.08);border-left:3px solid #f0c24f}.tgoal .tdone{color:#8fe08a;font-weight:700}
.tgoalset{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:6px}.tgoalset select{flex:1 1 120px}.tgoalset input{width:64px}.tgoalset .treset{margin-left:auto}

/* v0.99.23: Dailies & cooldowns tab */
.dtimers{display:grid;gap:6px;margin:0 0 10px}
.dtimer{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:6px 8px;background:#1d1b15;border:1px solid #000;box-shadow:inset 1px 1px 0 #3a372b}
.dtimer svg{width:20px;height:20px}
.dtimer b{color:var(--parch)}.dtimer small{display:block;color:var(--dim)}
.dtimer .when{font-variant-numeric:tabular-nums;color:var(--gold);text-align:right;white-space:nowrap}
.dtimer.ready .when{color:#7cff6b}

/* v0.99.39 (Kyle #42, a player on an iPhone #35: "too hard to press the top right part of the screen"): on phones and
   narrow screens the floating Current task window is off (the Activity tab's Now card is the tracker; 12-ui-panels.js
   taskWinShown) and the overlays on the game are spread out, every button at least 40px with 6px gaps, nothing on top of
   anything else:
     top right:   the minimap (114px), with the world map / hiscores / Index / hide-minimap buttons in a 2x2 grid under it
                  (at the very top when the minimap is hidden);
     top left:    the ping / players bar (online), then the HP and prayer orbs, then potion boosts;
     bottom left: the world boss card, with the tracked quest under it (closest to your thumb).
   The .mmwrap covers the whole game but lets taps through its empty space (like the hidden-minimap mode). */
@media (max-width:820px){
  .taskwin{display:none!important}
  .fbbtn{min-height:40px;padding:6px 14px}
  .netbar>.ping,.netbar>.pcount{box-sizing:border-box;min-height:40px;line-height:36px;padding:0 8px}
  .mmwrap,.mmwrap.mmoff{inset:6px 8px;width:auto;height:auto;display:block;pointer-events:none}
  .mmwrap>*{pointer-events:auto}
  .mmwrap .minimap{position:absolute;top:0;right:0;box-sizing:border-box;width:114px;height:114px}
  .mmwrap .mmn{left:auto;right:47px;transform:none}
  .mmwrap>.mmexp,.mmwrap.mmoff>.mmexp{position:absolute;box-sizing:border-box;width:40px;height:40px;top:120px;bottom:auto;left:auto;right:0;transform:none}
  .mmwrap>.mmexp svg{width:20px;height:20px}
  .mmwrap>.mmmap,.mmwrap>.mmidx,.mmwrap.mmoff>.mmmap,.mmwrap.mmoff>.mmidx{right:46px}
  .mmwrap>.mmidx,.mmwrap>.mmtog{top:166px}
  .mmwrap.mmoff>.mmmap,.mmwrap.mmoff>.mmhs{top:0}
  .mmwrap.mmoff>.mmidx,.mmwrap.mmoff>.mmtog{top:46px}
  .mmwrap>.hporb,.mmwrap.mmoff>.hporb{position:absolute;box-sizing:border-box;height:40px;width:92px;left:0;right:auto;top:0;bottom:auto;transform:none;justify-content:center;padding:0 6px;font-size:1rem;gap:4px}
  .mmwrap>#prayOrb{top:46px}
  .mmwrap>.hporb svg{width:20px;height:20px}
  .game.hasnet .mmwrap>#hpOrb{top:46px}
  .game.hasnet .mmwrap>#prayOrb{top:92px}
  /* v0.99.41 (Kyle, #63): the "N buffs" button goes under the ping bar (at the top offline), the orbs one step down */
  .buffbtn{box-sizing:border-box;min-height:40px;line-height:36px;padding:0 10px;font-size:.8rem}
  .game.hasnet .buffbox{top:52px}
  .game.hasbuffs .mmwrap>#hpOrb{top:46px}
  .game.hasbuffs .mmwrap>#prayOrb{top:92px}
  .game.hasnet.hasbuffs .mmwrap>#hpOrb{top:92px}
  .game.hasnet.hasbuffs .mmwrap>#prayOrb{top:138px}
  .buffdrop{max-width:min(260px,calc(100vw - 48px))}
  .buffrow{padding:5px 0}
  /* bottom left (above the version line): the world boss card, and the tracked quest under it */
  .mmwrap>#trackBadge,.mmwrap>#bossHud{position:absolute;box-sizing:border-box;left:0;right:auto;top:auto;bottom:18px;transform:none;width:min(200px,calc(100% - 100px));max-width:none}
  .mmwrap>#trackBadge{display:flex;align-items:center;height:44px;padding:0 0 0 10px;font-size:.8rem}
  .trackbadge .tl{flex:none;margin-right:4px}
  .trackbadge .tq{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .trackbadge .tx{flex:none;width:40px;height:40px;font-size:1.1rem}
  .mmwrap>#trackBadge:not([hidden]) ~ #bossHud{top:auto;bottom:68px}
  .mmwrap>#bossHud{padding:3px 49px 4px 5px}
  /* v0.99.41 (Kyle, #69): the arrow tab is the card's right edge, 44px wide; tucked away, the card slides left */
  .bosshud .bh-tab{left:auto;right:-2px;width:44px;font-size:1rem}
  .bosshud .bh-tab span::before{content:"◂"}
  .bosshud.bhoff .bh-tab span::before{content:"▸"}
  .mmwrap>#bossHud.bhoff{transform:translateX(calc(-100% + 36px))}
  .bosshud .bh-row{min-height:40px}
  .bosshud .bh-join{min-height:40px;min-width:52px;padding:0 10px;font-size:.78rem;line-height:1}
  .bosshud .bh-text{font-size:.62rem}
}
/* v0.99.41 (Kyle, #68): premium cosmetics are items: their slots in the Worn tab's Cosmetic view, and "Claim another" */
.cospremhead{margin:8px 0 2px;font-size:.72rem;color:#cfa8ff;text-align:center}
.cosprem{display:grid;grid-template-columns:repeat(4,52px);gap:6px;justify-content:center;margin:2px 0 6px}
.cosprem .eq small{position:absolute;bottom:2px;left:0;right:0;font-size:.55rem;color:var(--dim);opacity:.8}
.cositem .cosclaim{margin-top:2px;padding:1px 5px;border:1px solid #7d5aa8;border-radius:2px;background:#2c2338;color:#cfa8ff;font-size:.62rem;cursor:pointer}
.cositem .cosclaim:hover,.cositem .cosclaim:focus{border-color:var(--gold);color:var(--gold)}

/* v0.99.48: the Siege Works bar at the top of the game view (05r-siege.js siegeHud) */
.siegehud{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:min(410px,44%);z-index:3;background:rgba(26,25,20,.88);border:2px solid var(--edge);border-radius:3px;box-shadow:0 0 0 1px #000;padding:4px 8px 5px;font-size:.74rem;color:var(--parch);line-height:1.35}
.siegehud[hidden]{display:none}
.siegehud .sg-head{text-align:center;font-family:var(--pixel);font-size:.9rem;color:#fff;margin-bottom:2px}
.siegehud .sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.siegehud .sg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid #000;flex:none}
.siegehud .sg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:3px}
.siegehud .sg-auto{margin-left:auto;padding:1px 8px;font-size:.72rem;background:#3f5a24;border-color:#8fc25a;color:#fff}
.siegehud .sg-auto:hover{background:#4f7230}
/* (a phone: a narrow column under the orbs, left of the player, without the stockpile numbers) */
@media (max-width:820px){.siegehud{top:150px;left:6px;transform:none;width:min(156px,42%);font-size:.6rem;padding:3px 5px 4px}.siegehud .sg-head{font-size:.72rem}
  .siegehud .sg-more{display:none}.siegehud .sg-auto{min-height:40px;width:100%;margin-left:0;font-size:.66rem}}
/* v0.99.52: the Great Trading Post (js/16e-exchange.js) */
.gebody{overflow-y:auto;min-height:0}
.gebody h3{margin:8px 0 6px;font-family:var(--pixel)}
.geslots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.geslot{display:flex;flex-direction:column;gap:5px;background:#1e1d18;border:1px solid #14130f;border-left:3px solid var(--edge);padding:7px 8px;min-height:116px}
.geslot.buy{border-left-color:var(--leaf)}.geslot.sell{border-left-color:var(--gold)}.geslot.cancelled{opacity:.8}
.geslot.empty{align-items:center;justify-content:center;border-style:dashed;border-left-width:1px;color:var(--dim)}
.gehead{display:flex;gap:6px;align-items:flex-start}
.geic svg,.geic .pxi,.gepick svg,.gepick .pxi,.getable svg,.getable .pxi{width:24px;height:24px;flex:none;vertical-align:middle}
.gen{display:flex;flex-direction:column;font-size:.86rem;min-width:0}
.gen small{color:var(--dim);font-size:.76rem}
.gebar{height:6px;background:#11100c;border:1px solid #000}
.gebar i{display:block;height:100%;background:var(--leaf)}
.geslot.sell .gebar i{background:var(--gold)}
.gebox{font-size:.78rem;color:var(--parch);min-height:1em}
.gebtns{display:flex;gap:4px;flex-wrap:wrap}
.gesearch{width:100%;box-sizing:border-box;margin:0 0 6px;padding:5px 7px;background:#11100c;color:var(--parch);border:1px solid var(--edge);font:inherit}
.gepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px;max-height:320px;overflow-y:auto}
.gepick .btn{display:flex;gap:6px;align-items:center;text-align:left}
.gepick small{display:block;color:var(--dim)}
.geform{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
.geform label{display:flex;flex-direction:column;font-size:.8rem;color:var(--dim)}
.geform input{width:150px;padding:4px 6px;background:#11100c;color:var(--parch);border:1px solid var(--edge);font:inherit;font-variant-numeric:tabular-nums}
.geq,.getotal{font-size:.86rem}
.geerr{color:var(--danger);margin:0 0 6px}
.getable{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
.getable th{text-align:left;font-weight:600;opacity:.75;border-bottom:1px solid var(--edge);padding:3px 4px}
.getable td{padding:3px 4px;border-bottom:1px solid #24231c}
@media (max-width:640px){.geslots{grid-template-columns:repeat(2,minmax(0,1fr))}.geform{grid-template-columns:1fr}}
/* v0.99.72: skill mastery on the Skills tab (13b2-mastery.js) */
.mastery{margin-top:8px;text-align:left;display:flex;flex-direction:column;gap:4px}
.mhead{display:flex;justify-content:space-between;gap:6px;font-weight:bold;color:var(--gold)}
.mhead span{font-weight:normal;opacity:.8;font-size:.8rem}
.mpool{position:relative;height:8px;background:#1a1914;border:1px solid #000;margin:4px 0}
.mpool>div{height:100%;background:var(--gold)}
.mpool i{position:absolute;top:-3px;bottom:-3px;width:1px;background:#e8e0cc}
.mcps{display:flex;flex-direction:column;gap:1px;font-size:.78rem;opacity:.7}
.mcps .on{opacity:1;color:#bfe89a}.mcps b{display:inline-block;min-width:2.6em}
.mrow{display:grid;grid-template-columns:1fr auto;gap:0 6px;background:#1e1d18;border:1px solid #000;padding:3px 6px;font-size:.82rem}
.mrow .bar{grid-column:1/-1;height:4px;margin:2px 0}
.mrow small{grid-column:1/-1;opacity:.7;font-size:.72rem}
.mrow.mnone{opacity:.55}
.mstar{color:var(--gold)}
/* v0.99.77: the collection log (13f2-collog.js) */
.loghead{margin-bottom:6px}
.logbar{position:relative;height:9px}
.logbar i{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,0,0,.6)}
.logtools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.logtools .btn.on{border-color:var(--gold);color:var(--gold)}
.logtitle{font-size:.82rem;display:flex;align-items:center;gap:4px}
.logtitle select{font:inherit;background:var(--stone-2);color:inherit;border:1px solid #000;padding:1px 4px}
.ccat.done small{color:var(--gold)}
.logslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:4px}
.logslot{display:flex;flex-direction:column;align-items:center;gap:2px;background:#1e1d18;border:1px solid #000;padding:4px 3px;text-align:center;min-width:0}
.logslot svg,.logslot .pxi,.logslot canvas{width:32px;height:32px;display:block}
.logslot small{font-size:.7rem;line-height:1.1;overflow-wrap:anywhere}
.logslot i{font-style:normal;font-size:.66rem;opacity:.75}
.logslot .bar{width:100%;height:4px;margin:1px 0}
.logslot.unfound svg,.logslot.unfound .pxi,.logslot.unfound canvas{filter:brightness(0) opacity(.45)}
.logslot.mastered{border-color:var(--gold)}
.logslot.mastered i{color:var(--gold);opacity:1}
.titletag{color:#f0c24f}