:root { color-scheme: dark; font-family: system-ui, -apple-system, sans-serif; color: #eee; background: #000; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: #eee; background: #0009; border: 1px solid #ffffff30; border-radius: 5px; padding: 7px 11px; }
button:hover { background: #222d; border-color: #ffffff70; }
button:disabled { opacity: .4; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid #e9b75c; outline-offset: 3px; }
a { color: #e9b75c; }
#app, #stage { position: fixed; inset: 0; }
#game { display: block; width: 100%; height: 100dvh; object-fit: contain; image-rendering: pixelated; outline: none; touch-action: none; }
.paused #game { filter: brightness(.55); }
#start { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 120px; min-height: 48px; font-size: 18px; }
.toolbar { position: absolute; z-index: 2; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 5px; }
.toolbar button { font-size: 12px; }
.softkey { position: absolute; z-index: 2; bottom: max(12px, env(safe-area-inset-bottom)); min-width: 44px; min-height: 44px; font-size: 18px; touch-action: none; user-select: none; -webkit-user-select: none; }
.softkey.left { left: max(12px, env(safe-area-inset-left)); }
.softkey.right { right: max(12px, env(safe-area-inset-right)); }
.softkey.held { color: #000; background: #e9b75c; }
#error { position: fixed; z-index: 5; bottom: 70px; left: 50%; transform: translateX(-50%); width: min(90vw, 700px); display: flex; gap: 15px; align-items: center; background: #41271f; color: #ffd7ba; border: 1px solid #b77651; border-radius: 6px; padding: 12px 16px; font-size: 12px; }
#error span { flex: 1; overflow-wrap: anywhere; }
@media (max-width: 400px) { .toolbar { gap: 3px; } .toolbar button { font-size: 11px; padding: 7px 8px; } }