@font-face { font-family: 'SUCalli'; src: url('fonts/calli.ttf') format('truetype'); }
@font-face { font-family: 'SUCalli2'; src: url('fonts/calli2.ttf') format('truetype'); }
@font-face { font-family: 'SUCalli3'; src: url('fonts/calli3.ttf') format('truetype'); }
@font-face { font-family: 'SUNiamey'; src: url('fonts/niamey.ttf') format('truetype'); }
@font-face { font-family: 'SUVerdana'; src: local('Verdana'), url('fonts/verdana.ttf') format('truetype'); }
@font-face { font-family: 'SUTimes'; src: local('Times New Roman'), url('fonts/times.ttf') format('truetype'); }
:where(html, html *) { scrollbar-width:thin; scrollbar-color:#8a5a2a rgba(120,90,50,.2); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(120,90,50,.2); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#8a5a2a; 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; }

#rules { overflow-y: auto; overflow-x: hidden; line-height: 1.3; text-align: justify; -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#rules p { margin: 0 0 6px; }
#rules h4 { margin: 8px 0 2px; font-size: 1em; }

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