@font-face { font-family: 'BMEndor'; src: url('fonts/endor.ttf') format('truetype'); }
@font-face { font-family: 'BMArial'; src: url('fonts/arial.ttf') format('truetype'); }
@font-face { font-family: 'BMArialB'; src: url('fonts/arialb.ttf') format('truetype'); }
@font-face { font-family: 'BMVerd'; src: url('fonts/verdana.ttf') format('truetype'); }
@font-face { font-family: 'BMTimesB'; src: url('fonts/timesb.ttf') format('truetype'); }
@font-face { font-family: 'BMTimesBI'; src: url('fonts/timesbi.ttf') format('truetype'); }

:where(html, html *) { scrollbar-width:thin; scrollbar-color:#5d3a8c rgba(181,151,220,.3); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(181,151,220,.3); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#5d3a8c; border-radius:5px; border:2px solid transparent; background-clip:padding-box; }

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: manipulation; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 800px; height: 600px; flex: none; transform-origin: 50% 50%; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#c { position: absolute; left: 0; top: 0; width: 800px; height: 600px; display: block; }
[hidden] { display: none !important; }

.ov { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; margin: 0; }
.tf { background: transparent; border: 0; outline: none; padding: 2px; }
input.tf { font: 12px BMArial, Arial, sans-serif; color: #000; caret-color: #000; -webkit-user-select: text; user-select: text; }

#ulist { background: #fff; border: 1px solid #919999; overflow-y: auto; overflow-x: hidden; }
#ulist.dis .it { color: #999; cursor: default; }
#ulist.dis .it:hover { background: none; }
.it { height: 20px; line-height: 20px; padding: 0 4px; font: 12px BMArial, Arial, sans-serif; color: #000; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: pointer; }
.it:hover { background: #cce8cc; }
.it.me { cursor: default; }
.it.me:hover { background: none; }

#chatwin, #gchatwin { overflow-y: auto; overflow-x: hidden; font: 11px BMVerd, Verdana, sans-serif; line-height: 1.25; color: #000;
  word-wrap: break-word; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#chatwin .nm { color: #975322; cursor: pointer; }
#chatwin .nm:hover { text-decoration: underline; }
#gchatwin { color: #fff; }
#gchatin { color: #fff; caret-color: #fff; font: 11px BMArial, Arial, sans-serif; }
#pmin { color: #000; }

#helptext { overflow-y: scroll; overflow-x: hidden; padding: 2px 4px 2px 2px; font: 10px BMArial, Arial, sans-serif; color: #231c0c; line-height: 1.15;
  -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#helptext p { margin: 0; }

#note { position: absolute; left: 200px; top: 270px; width: 400px; text-align: center; font: 14px BMArial, Arial, sans-serif; color: #ddd; }

#kipanel { position: absolute; left: 466px; top: 330px; width: 112px; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 10px; background: rgba(28, 12, 44, .9); border: 1px solid #9b7bc4; box-shadow: 0 4px 10px rgba(0,0,0,.55);
  font: 11px BMArial, Arial, sans-serif; color: #fff; text-align: center; z-index: 5; }
#kipanel span { font-weight: bold; color: #f2d46b; line-height: 1.2; }
#kipanel button { font: bold 12px BMArial, Arial, sans-serif; color: #fff; cursor: pointer; padding: 6px 4px; border-radius: 6px;
  border: 1px solid #b597dc; background: linear-gradient(#5d3a8c, #36204f); }
#kipanel button:hover { background: linear-gradient(#7149a8, #44295f); }
#kipanel button.an { border-color: #f2d46b; box-shadow: 0 0 0 1px #f2d46b inset; }