html, body { margin: 0; height: 100%; background: #07080f; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; font-family: system-ui, sans-serif; }
#gl, #c { position: absolute; inset: 0; margin: auto; display: block; }
#c { image-rendering: pixelated; image-rendering: crisp-edges; cursor: none; }
.f { position: absolute; display: none; opacity: 0.01; border: 0; padding: 0; margin: 0; background: transparent; color: transparent; font-size: 16px; outline: none; caret-color: transparent; z-index: 2; }
/* Pixaplay: the player bar on the menu (name, Pixels, Pass), its dialog and toasts */
.who { position: absolute; top: 10px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #f4f4f8; }
.who .px { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.who .px i { width: 11px; height: 11px; background: #ff3d9a; transform: rotate(45deg); border-radius: 2px; display: inline-block; }
.who .badge { background: #ffd23f; color: #1a1400; font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; }
.who button { font: inherit; color: inherit; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid #ffffff30; background: #0008; }
.who button.go { background: #feae34; color: #2a1a06; border-color: transparent; font-weight: 700; }
dialog { background: #181425; color: #f4f4f8; border: 1px solid #ffffff22; border-radius: 14px; max-width: 320px; }
dialog::backdrop { background: #0009; }
dialog h2 { margin-top: 0; }
dialog .sheet { display: grid; gap: 10px; min-width: 240px; }
dialog button { font: inherit; padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #181425; color: #f4f4f8; border: 1px solid #ffffff22; padding: 10px 16px; border-radius: 999px; z-index: 50; }