* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0f1030; color: #c7c7e8; font-family: system-ui, sans-serif; }
main { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px; }
.frame { position: relative; width: min(100%, 960px, calc((100vh - 120px) * 1.875)); }
canvas { width: 100%; height: auto; display: block; border: 4px solid #ffd60a; border-radius: 12px; background: #000; image-rendering: pixelated; touch-action: none; }
.toolbar { position: absolute; top: 40px; right: 10px; display: flex; gap: 6px; }
.toolbar button { background: rgba(0, 0, 0, .5); border: 0; color: #fff; border-radius: 8px; padding: 4px 8px; font-size: 16px; cursor: pointer; }
.hint { margin: 0; font-size: 14px; text-align: center; }
.touch { display: none; width: 100%; max-width: 960px; justify-content: space-between; padding: 0 8px; }
.touch button { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #ffd60a; background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px; font-weight: bold; touch-action: none; user-select: none; }
.touch .big { width: 110px; }
.dpad, .actions { display: flex; gap: 12px; align-items: center; }
@media (pointer: coarse) { .touch { display: flex; } .hint { display: none; } }