@font-face { font-family: 'TRArial'; src: url('fonts/arial.ttf') format('truetype'); }
@font-face { font-family: 'TRNiamey'; src: url('fonts/niamey.ttf') format('truetype'); }
@font-face { font-family: 'TRTimesCE'; src: url('fonts/timesce.ttf') format('truetype'); }
:where(html, html *) { scrollbar-width:thin; scrollbar-color:#c0392b rgba(40,20,20,.45); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(40,20,20,.45); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#c0392b; border-radius:5px; border:2px solid transparent; background-clip:padding-box; }

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 800px; height: 600px; flex: none; 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; }

#pad { position: absolute; left: 0; right: 0; bottom: 118px; height: 0; pointer-events: none; }
#pad .l, #pad .r { position: absolute; bottom: 0; display: flex; gap: 10px; pointer-events: auto; }
#pad .l { left: 12px; } #pad .r { right: 12px; }
#pad button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: rgba(40,20,20,.45);
  color: #fff; font: bold 26px Arial, sans-serif; padding: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
#pad button:active { background: rgba(160,40,40,.7); }
#note { position: absolute; left: 0; right: 0; top: 280px; text-align: center; font: 16px Arial, sans-serif; color: #ccc; }