@font-face { font-family: 'SBEuroB'; src: url('fonts/eurob.ttf') format('truetype'); }
@font-face { font-family: 'SBEuro'; src: url('fonts/euro.ttf') format('truetype'); }
@font-face { font-family: 'SBArialB'; src: url('fonts/arialb.ttf') format('truetype'); }
@font-face { font-family: 'SBVerd'; src: url('fonts/verdana.ttf') format('truetype'); }
@font-face { font-family: 'SBNiamey'; src: url('fonts/niamey.ttf') format('truetype'); }
@font-face { font-family: 'SBButter'; src: url('fonts/butter.ttf') format('truetype'); }
:where(html, html *) { scrollbar-width:thin; scrollbar-color:#6fb840 rgba(8,60,20,.45); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(8,60,20,.45); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#6fb840; 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: 754px; height: 500px; 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: 754px; height: 500px; display: block; }
[hidden] { display: none !important; }

.ov { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; margin: 0; }

#rules { overflow: hidden; -webkit-user-select: text; user-select: text; }
#rules p { margin: 0; }
#rulesbar { background: #4b5c66; border: 1px solid #6e838f; box-sizing: border-box; cursor: default; }
#rulesthumb { position: absolute; left: 1px; right: 1px; top: 0; background: #b9c9d2; border: 1px solid #e7eef2; box-sizing: border-box; }

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

#pad { position: absolute; left: 596px; top: 372px; width: 152px; height: 60px; display: flex; gap: 5px; }
.pb { flex: 1; height: 58px; border: 2px solid #e7f5d8; border-radius: 10px; background: rgba(8, 60, 20, .78); color: #e7f5d8;
  font: 22px/1 Arial, sans-serif; padding: 0; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.pb:active { background: rgba(120, 190, 60, .85); }