@font-face { font-family: 'BBDicotB'; src: url('fonts/dicotb.ttf') format('truetype'); }
@font-face { font-family: 'BBDicot'; src: url('fonts/dicot.ttf') format('truetype'); }
@font-face { font-family: 'BBArialB'; src: url('fonts/arialb.ttf') format('truetype'); }
@font-face { font-family: 'BBArial'; src: url('fonts/arial.ttf') format('truetype'); }
@font-face { font-family: 'BBVerd'; src: url('fonts/verdana.ttf') format('truetype'); }

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

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

#rules { position: absolute; left: 278px; top: 202.85px; width: 324px; height: 325px; box-sizing: border-box; padding: 0 17px 0 2px;
  overflow-y: scroll; overflow-x: hidden; white-space: pre-wrap; font: 13px/15px BBVerd, Verdana, sans-serif;
  -webkit-user-select: text; user-select: text; touch-action: pan-y; }
#rules::-webkit-scrollbar { width: 16px; }
#rules::-webkit-scrollbar-track { background: rgba(0,0,0,.3); border-left: 1px solid rgba(217,154,34,.45); }
#rules::-webkit-scrollbar-thumb { background: #d99a22; border: 1px solid #7a4e0c; box-shadow: inset 1px 1px 0 rgba(255,230,160,.55); }
@supports not selector(::-webkit-scrollbar) { #rules { scrollbar-color: #d99a22 rgba(0,0,0,.3); } }
#note { position: absolute; left: 0; right: 0; top: 270px; text-align: center; font: 16px Arial, sans-serif; color: #cfa; }