@font-face { font-family: 'BSArial'; src: url('fonts/arial.ttf') format('truetype'); }
@font-face { font-family: 'BSArialB'; src: url('fonts/arialb.ttf') format('truetype'); }
@font-face { font-family: 'BSArialBI'; src: url('fonts/arialbi.ttf') format('truetype'); }
@font-face { font-family: 'BSVerd'; src: url('fonts/verdana.ttf') format('truetype'); }
@font-face { font-family: 'BSNiamey'; src: url('fonts/niamey.ttf') format('truetype'); }
@font-face { font-family: 'BSDigi'; src: url('fonts/digital.ttf') format('truetype'); }
@font-face { font-family: 'BSDigiB'; src: url('fonts/digitalb.ttf') format('truetype'); }
@font-face { font-family: 'BSBit3'; src: url('fonts/bit3.ttf') format('truetype'); }
@font-face { font-family: 'BSEuroB'; src: url('fonts/euro.ttf') format('truetype'); }

:where(html, html *) { scrollbar-width:thin; scrollbar-color:#3a5b8f rgba(138,164,204,.3); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(138,164,204,.3); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#3a5b8f; 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 BSArial, 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 BSArial, 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 BSVerd, 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; }

#helptext { overflow-y: scroll; overflow-x: hidden; padding: 2px 4px 2px 2px; font: 10px BSArial, Arial, sans-serif; color: #000;
  line-height: 1.2; white-space: pre-wrap; -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#helptext { white-space: normal; }
#helptext p { margin: 0; }

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

#tpad { position: absolute; left: 0; right: 0; bottom: 10px; height: 0; pointer-events: none; z-index: 5; }
#tpad .l, #tpad .r { position: absolute; bottom: 0; display: flex; align-items: center; gap: 6px; pointer-events: auto; }
#tpad .l { left: 10px; } #tpad .r { right: 10px; }
#tpad .ud { display: flex; flex-direction: column; gap: 6px; }
#tpad button { width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(10,30,60,.55);
  color: #fff; font: 700 30px/1 Arial, sans-serif; touch-action: none; -webkit-tap-highlight-color: transparent; }
#tpad button:active { background: rgba(40,110,200,.8); }
#tpad .ud button { width: 58px; height: 58px; font-size: 22px; }
#tpad:not(.drag) .l { display: none; }
#tpad:not(.move) .r { display: none; }

#kipanel { position: absolute; left: 460px; top: 330px; width: 112px; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 10px; background: rgba(12, 26, 52, .88); border: 1px solid #5d7aa8; box-shadow: 0 4px 10px rgba(0,0,0,.5);
  font: 11px BSArial, Arial, sans-serif; color: #fff; text-align: center; z-index: 5; }
#kipanel span { font-weight: bold; color: #ffd36b; line-height: 1.2; }
#kipanel button { font: bold 12px BSArial, Arial, sans-serif; color: #fff; cursor: pointer; padding: 6px 4px; border-radius: 6px;
  border: 1px solid #8aa4cc; background: linear-gradient(#3a5b8f, #22385e); }
#kipanel button:hover { background: linear-gradient(#4b70ab, #2c4877); }
#kipanel button.an { border-color: #ffd36b; box-shadow: 0 0 0 1px #ffd36b inset; }