/* 19 Oct 2026, evening (owner: «all the menus and buttons round»; on the question how: rounded corners, the icon buttons circles; on the PC and
   on the phone). The round look over the pixel frames of the kit and the bar, loaded after every other sheet.
   The 9-slice frames (border-image) are off here; every border keeps its width, so nothing in the layout moves: the fill runs under the
   border (background-clip:border-box) and the rim is an outline drawn inside the edge, which follows the rounding (outline-offset = minus
   its width). Circles: the spells, the potion and the dash, the diamonds of the bar, the icons of the top bar, ✕ of the windows and the bag,
   the bag's tabs, the level badge. Slots of the gear and of the bag, rows and cards: rounded squares.
   To go back to the pixel frames: delete this file and its <link> at the end of the sheets in index.html. */
:root{
  --rW:18px;   /* windows */
  --rP:14px;   /* panels, the bag, the bar */
  --rB:10px;   /* buttons, fields, rows, cards */
  --rS:12px;   /* slots */
  --rim:#8d6232;--rimHi:#d4a046;--rimOn:#ffd24a;--rimDim:#5b3d1e;
  --fB:linear-gradient(180deg,#3b2817 0%,#24180e 60%,#1d130b 100%);
  --fBh:linear-gradient(180deg,#4d341e 0%,#2e1f12 100%);
  --fBon:linear-gradient(180deg,#5a3a17 0%,#33200d 100%);
  --fHot:linear-gradient(180deg,#ffdc92 0%,#f3a838 52%,#d27a12 100%);
  --st:#59616b;--stHi:#8a929c;--fSt:linear-gradient(180deg,#2d3239 0%,#1a1d22 100%);--fSth:linear-gradient(180deg,#3a4049 0%,#22262c 100%);
  --fStOn:linear-gradient(180deg,#4a3614 0%,#2a1d0a 100%);
}

/* ---------- buttons ---------- */
.btn{border-image:none!important;border-radius:var(--rB);background:var(--fB) border-box;outline:2px solid var(--rim);outline-offset:-2px;
  box-shadow:inset 0 1px 0 #ffffff14,0 1px 2px #0009;image-rendering:auto}
.btn:hover{background:var(--fBh) border-box;outline-color:var(--rimHi)}
.btn.on,.mtabs .btn.on{background:var(--fBon) border-box;outline-color:var(--rimOn)}
.btn.hot{background:var(--fHot) border-box;outline-color:#ffeab4;box-shadow:inset 0 1px 0 #fff6,0 1px 3px #000a}
.btn.hot:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--ember2);outline-offset:-2px}
.btn:disabled{outline-color:var(--rimDim)}
.seg{gap:3px}
.seg .btn,.seg .btn:first-child{margin:0}
/* the zone tabs of the desktop top bar stay frameless tabs */
#zones .btn{outline:0!important;box-shadow:none!important;background:none!important;border-radius:6px 6px 0 0}

/* ---------- fields ---------- */
input[type=text],input[type=number],input:not([type]),#search,.mksell input,.clform input,#chatIn{border-image:none!important;border-radius:var(--rB);
  background:#0c0906 border-box;outline:2px solid #4a3018;outline-offset:-2px;image-rendering:auto}
input[type=text]:focus,input[type=number]:focus,input:not([type]):focus,#chatIn:focus{outline-color:var(--rimHi)}
#mside input{border-radius:var(--rB)}

/* ---------- panels and windows ---------- */
.panel{border-image:none!important;border-radius:var(--rP);background-clip:border-box!important;outline:2px solid var(--rim);outline-offset:-2px;image-rendering:auto}
.modal.panel:not(:has(.jrn)):not(:has(.ofWrap)){border-width:3px;border-radius:var(--rW);outline:2px solid var(--rimHi);outline-offset:-2px;padding:12px 16px 16px;
  box-shadow:0 0 0 1px #000,inset 0 0 0 4px #1a130e,inset 0 0 0 5px #4a3018,0 18px 60px #000c}
.modal>h2.mHead{top:-12px;margin:-12px -16px 8px;padding:12px 16px 8px;border-radius:var(--rW) var(--rW) 0 0}
.veil:not(.side)>.modal.panel:not(.aucFull):not(:has(.jrn)):not(:has(.ofWrap)){max-height:calc(100vh - 66px)}   /* the veil's 2x16, the border 2x3, the padding 12+16 */
.modal:has(.jrn),.modal:has(.ofWrap){border-radius:var(--rW)}
.modal:has(.ofWrap){outline:2px solid var(--gold);outline-offset:-2px;overflow:hidden auto}   /* 19 Oct (owner, Android): taller than a phone, it scrolls (overflow:hidden hid «Потом» under the screen) */
.mX,.mQ{border-radius:50%}
/* the top chips: pills */
#top .panel,#gold,#online,#evChip{border-radius:999px}
#gold{outline-color:var(--rimOn)}
/* floating panels over the world */
#ctx,#tip,#toast,#loreTrk,#target,#watch,#lfgBar,#ulTip,#emoPick,#chatChMenu{border-radius:var(--rP)}

/* ---------- boxes, rows, cards and slots inside the windows ---------- */
.slot,.col,.mkrow,.clrow,.q,.rift,.plist div,.fgR,.fgCard,.frit,.fgTop,.fgRes,.card,.sab{border-image:none!important;border-radius:var(--rB);
  background-color:#150f0b;background-clip:border-box;outline:1.5px solid #4a3018;outline-offset:-1.5px}
.col.done{outline-color:var(--good)}
.fgR.on,.card.on{outline:2px solid var(--rimOn);outline-offset:-2px}
.art{border-image:none!important;border-radius:var(--rS);background:#100c09 border-box;outline:2px solid #5a3a1c;outline-offset:-2px}
.art:not(.miss){outline-color:var(--rimHi)}
.art canvas{border-radius:calc(var(--rS) - 6px)}
#lvlbox,#buffs span{border-image:none!important;border-radius:999px;background:#0c0906 border-box;outline:1.5px solid #4a3018;outline-offset:-1.5px}

/* ---------- the bag ---------- */
body #bag{border-image:none!important;border-radius:var(--rP);background-clip:border-box!important;outline:2px solid var(--rimHi);outline-offset:-2px;overflow:hidden}
body #bag .bc{border-image:none!important;border-radius:var(--rS);background-clip:border-box;background-color:#100c09;outline:2px solid #4a3018;outline-offset:-2px}
body #bag .bc.e{outline-color:#3a2612}
body #bag .bc:not(.e):hover,body #bag .bc.sel{outline-color:var(--rimOn)}
body #bag .bc canvas{border-radius:8px}
body #bag .bgX{border-image:none!important;border-radius:50%;background:var(--fB) border-box;outline:2px solid var(--rim);outline-offset:-2px}
body #bag .bgX:hover{outline-color:var(--rimHi)}
body #bag .bgTabs button{border-radius:50%;width:34px;height:34px;margin:0 auto;flex:none}
body #bag .bgTabs button.on{border-image:none!important;border-color:transparent;background:var(--fBon) border-box;outline:2px solid var(--rimOn);outline-offset:-2px}
body #bag .bgFoot .btn{background:var(--fB) border-box}

/* ---------- the bottom bar ---------- */
#dock,#hudmm,#hud>#right{border-image:none!important;background-clip:border-box!important;outline:2px solid var(--st);outline-offset:-2px}
#dock{border-radius:var(--rP)}
#hudmm{border-radius:var(--rP)}
#hud>#right{border-radius:var(--rP)}
/* the commands: steel, gold when on */
#hud #cmds .btn{background:var(--fSt) border-box;outline-color:var(--st);color:#d8dee4}
#hud #cmds .btn:hover{background:var(--fSth) border-box;outline-color:var(--stHi);color:#fff}
#hud #cmds .btn.on{background:var(--fStOn) border-box;outline-color:#dea63a;color:#ffd27a}
#dock #hStatBtn,#dock #hCosBtn{border-image:none!important;background:var(--fSt) border-box;outline:2px solid var(--st);outline-offset:-2px;border-radius:999px}
#dock #hStatBtn:hover,#dock #hCosBtn:hover{outline-color:var(--stHi)}
/* the spells, the potion and the dash: circles; the key letter and the potions count move inside the circle */
#hud .ab,.ab{border-image:none!important;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2a2f36,#0c0e11 70%) border-box;outline:2px solid var(--st);outline-offset:-2px;overflow:hidden}
#hud .ab:hover,.ab:hover{outline-color:var(--stHi);filter:brightness(1.08)}
#hud .ab.act,.ab.act{outline:2px solid #ffde82;outline-offset:-2px}
#hud .ab.lock,.ab.lock{outline-color:#343a42}
.ab canvas{border-radius:50%}
#hud .ab .lv,.ab .lv{left:0!important;right:0!important;bottom:6%!important;text-align:center}
#hud .ab .pc,.ab .pc{left:0!important;right:0!important;top:5%!important;text-align:center}
/* the gear: rounded slots (the rounding in % so the small slots of a phone stay squares) */
#hud .it,.it{border-image:none!important;border-radius:24%;background:#0a0c0e border-box;outline:2px solid var(--st);outline-offset:-2px}
#hud .it:not(.empty):hover,.it:not(.empty):hover{outline-color:#ffde82}
.it canvas{border-radius:16%}
/* the diamonds of the bar become round buttons */
#hudBtns>button{transform:none!important;border-radius:50%!important}
#hudBtns>button svg{transform:none!important}
#hudBtns>button .ulL{left:auto!important;top:auto!important;right:-4px!important;bottom:-4px!important;transform:none!important}   /* the lock: at the corner of the circle */
.ulL{border-radius:50%;width:16px!important;height:16px!important}
/* the portrait: a rounded frame; the level badge: a gold circle */
#dock #pframe{border-image:none!important;border-radius:var(--rS);background:#0a0c0e border-box;outline:2px solid var(--st);outline-offset:-2px;overflow:visible}
#dock #portrait{border-radius:calc(var(--rS) - 4px)}
#dock #hlvl{background:radial-gradient(circle at 50% 35%,#1d2128,#0e1014 70%)!important;border-radius:50%;box-shadow:0 0 0 2px #dea63a,0 0 0 3px #000}
/* health, mana and experience: rounded troughs */
#dock #vbars .bar{border-image:none!important;border-radius:999px;background:#08090b border-box;outline:1.5px solid #2c3036;outline-offset:-1.5px;overflow:hidden}
#dock #vbars .bar i{border-radius:999px}
#mm{border-radius:var(--rB)}
@media (min-width:901px){#dock>#side{outline:0!important}}   /* the agent block of the desktop is a part of the bar, not a panel */
@media (orientation:portrait) and (max-width:500px){#hud>#right{outline:0!important}}   /* the phone's commands sit inside the bar */

/* ---------- the top bar: icon buttons are circles ---------- */
@media (min-width:901px) and (min-height:501px){
  #fsBtn,#sndBtn,#gfxBtn,#lang,#menuBtn{border-radius:50%!important}
  #top .srch #search{border-radius:999px}
}
#top .btn{border-radius:999px}

/* ---------- the chat ---------- */
#chat .btn,#emoPick button{border-radius:999px}
#chatSend{border-radius:50%!important}
#chatTabs button{border-radius:var(--rB) var(--rB) 0 0}

/* ---------- the main menu ---------- */
.mvb{border-radius:var(--rB)}
#mvSide,#show,#mPlay,#mside .panel,#mInfo .panel{border-radius:var(--rP)}
#roster>*{border-radius:var(--rB)}

/* ---------- boxes, cards, rows and lists of every window: rounded ---------- */
.aucBar select,.aucStats,.aucRow,.aucHead,.erBox,.erTop,#slB .slq,.cscr button,.ckinds button,.cscr .cbtn,.cscr .card,.cscr .cslot,.cresI,.cgr button,
#devPanel,#devPanel button,#riftHud,#bigHud,.q,#showRole,.fgC,.fgIc,.fgBig,.fgQty input,.mailgift,#loreTrk .tc,.ofTimer,.ofCard,.ofKinds button,.jtab,.jq,
.jchest,.jseal,.jrank,#quests .q,#quests .jopen,.dnBig,.dnCard,.dnIco,.dnRow,#poiPop,.chrA,.actBty .bty,.dnSc,#chatChMenu button,.iglist>div,
#pkScene .pkSum,#pkScene .pkC,.itCmp .icP,.settog,.setkey,.keyb,.tkCard,.tkBox,.tkSplit>div,.tkTier,.tkDays,.tkStep,.tkOff,.tkTbl,.tkRisk,.ccard,.ccard .cic,
#ulNew,#loreTrk .tact,.modal.helpPeek .mHelp,.xpiNow div,.xpiScroll,#wpop,#mvPool>div,#mvLines button,.aucIc,.mTools kbd,#chatLog .chtag,.jtab em,.qfTag,.grpTag,
.modal [style*="border:1px solid"],.modal [style*="border:2px solid"],#bag [style*="border:1px solid"],#ctx [style*="border:1px solid"]{border-radius:var(--rB)}
#wmap{border-radius:var(--rB)}
.jrn{border-radius:var(--rW)}
.bar,.cpbar,.erBar,.jbar,.tkBar,#loreTrk .tbar,#quests .q .bar,.xpiBar{border-radius:999px}
#chatLog canvas,.slot .cur canvas,.frhead canvas,#cutSub canvas,.sab canvas,#lootFeed .lf canvas,#slDrop canvas{border-radius:6px}
@media (orientation:landscape) and (max-height:500px),(orientation:portrait) and (max-width:500px){
  #hudBtns>button .ulL{width:11px!important;height:11px!important;right:-3px!important;bottom:-3px!important}
  #hudBtns>button .ulL svg{width:6px!important;height:8px!important}
}