@font-face { font-family: 'BGF222'; src: url('fonts/f222.ttf') format('truetype'); }
@font-face { font-family: 'BGF249'; src: url('fonts/f249.ttf') format('truetype'); }
@font-face { font-family: 'BGF257'; src: url('fonts/f257.ttf') format('truetype'); }
@font-face { font-family: 'BGF269'; src: url('fonts/f269.ttf') format('truetype'); }
@font-face { font-family: 'BGF292'; src: url('fonts/f292.ttf') format('truetype'); }
@font-face { font-family: 'BGF317'; src: url('fonts/f317.ttf') format('truetype'); }

:where(html, html *) { scrollbar-width:thin; scrollbar-color:#6a6a34 rgba(184,168,104,.3); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(184,168,104,.3); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#6a6a34; 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; }

.tf { position: absolute; box-sizing: border-box; margin: 0; background: transparent; border: 0; outline: none; padding: 2px; }
input.tf { font: 12px BGF269, Arial, sans-serif; color: #fff; caret-color: #fff; -webkit-user-select: text; user-select: text; }

#ulist { position: absolute; left: 606.3px; top: 99.65px; width: 137px; height: 398px; background: #fff; border: 1px solid #919999;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #6a6a34 #e6e2cc; }
#ulist::-webkit-scrollbar { width: 14px; }
#ulist::-webkit-scrollbar-track { background: #e6e2cc; border-left: 1px solid #b8a868; }
#ulist::-webkit-scrollbar-thumb { background: #7a7a3e; border: 1px solid #3e4020; }
#ulist.off { opacity: .1; }
#ulist.dis .it { color: #999; cursor: default; }
#ulist.dis .it:hover { background: none; }
.it { height: 20px; line-height: 20px; padding: 0 4px; font: 12px BGF269, Arial, sans-serif; color: #000; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: pointer; }
.it:hover { background: #e3e3e3; }
.it.me { cursor: default; }
.it.me:hover { background: none; }

#chatwin { left: 59.99px; top: 263.7px; width: 307px; height: 222.75px; transform: scaleX(1.205); transform-origin: 0 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #6a6a34 #e6e2cc; }
#chatwin::-webkit-scrollbar { width: 12px; }
#chatwin::-webkit-scrollbar-track { background: #e6e2cc; }
#chatwin::-webkit-scrollbar-thumb { background: #7a7a3e; border: 1px solid #3e4020; }
#chattext, #gchattext { position: relative; left: 0; right: 0; top: 0; padding: 2px; font: 10px Verdana, BGF317, sans-serif; line-height: 1.2; color: #000;
  word-wrap: break-word; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
#chattext .nm { color: #000099; font-size: 11px; cursor: pointer; }
#chattext .nm:hover { text-decoration: underline; }
#chatin { left: 59.6px; top: 541.7px; width: 312.4px; height: 18.5px; transform: scale(1.1203, 1.1086); transform-origin: 0 0; }

#gchatwin { left: 206.7px; top: 524.4px; width: 202.85px; height: 43.45px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
#gchatwin::-webkit-scrollbar { width: 0; }
#gchattext { font-size: 9px; color: #fff; }
#gchattext b { font-weight: bold; }
#gchatin { left: 207.45px; top: 579.05px; width: 180.5px; height: 19.75px; font: 10px Verdana, BGF317, sans-serif; }

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

#kipanel { position: absolute; left: 468px; top: 300px; width: 110px; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 6px; background: rgba(38, 44, 24, .92); border: 1px solid #a89a5c; box-shadow: 0 4px 10px rgba(0,0,0,.55);
  font: 11px BGF269, Arial, sans-serif; color: #fff; text-align: center; z-index: 5; }
#kipanel span { font-weight: bold; color: #f0d878; line-height: 1.2; }
#kipanel button { font: bold 12px BGF269, Arial, sans-serif; color: #fff; cursor: pointer; padding: 6px 4px; border-radius: 4px;
  border: 1px solid #b8a868; background: linear-gradient(#6a6a34, #3e4020); }
#kipanel button:hover { background: linear-gradient(#828244, #4c4e28); }
#kipanel button.an { border-color: #f0d878; box-shadow: 0 0 0 1px #f0d878 inset; }