* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0a14; color: #e9e4f2; font: 14px/1.4 system-ui, "Segoe UI", sans-serif; }
body { display: flex; flex-direction: column; overflow: hidden; }
.top { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: #17111f; border-bottom: 1px solid #2a2036; flex-wrap: wrap; }
.back { color: #b9a9d6; text-decoration: none; }
.back:hover { color: #fff; }
.brand { font-weight: 800; letter-spacing: .5px; }
.who { color: #d9c98f; font-size: 13px; text-decoration: none; }
a.who:hover { color: #fff; }
.keys { margin-left: auto; color: #9a8db0; font-size: 12px; }
.keys b { color: #e9e4f2; background: #2a2036; padding: 0 5px; border-radius: 3px; font-weight: 600; }
.stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
canvas { display: block; max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9; width: 100%; height: auto; background: #000; touch-action: none; outline: none; }
@media (min-aspect-ratio: 16/9) { canvas { width: auto; height: 100%; } }
.touch { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: 12px 16px; pointer-events: none; }
.touch .pad { display: flex; gap: 10px; pointer-events: auto; }
.touch button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(20,14,30,.45); color: #fff; font-size: 24px; touch-action: none; user-select: none; -webkit-user-select: none; }
.touch button.on { background: rgba(179,38,46,.7); }
@media (max-width: 700px) { .keys { display: none; } }