* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0b1a2e; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif; height: 100%; }
#app { display: flex; flex-direction: column; height: 100vh; max-width: 480px; margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #0f1f3a; }
.title { font-weight: 700; } .title small { font-weight: 400; opacity: .7; font-size: 12px; }
.spacer { flex: 1; }
.hud { font-size: 14px; } .hud b { color: #38bdf8; } .sep { opacity: .5; margin: 0 4px; } .opt { opacity: .8; }
#status { padding: 6px 12px; font-size: 13px; background: #0b1a2e; min-height: 24px; }
#stage { width: 100%; height: auto; display: block; background: #0b1a2e; flex: 1; }
#statusbar { padding: 8px 12px; background: #0f1f3a; }
.actions { display: flex; gap: 8px; }
.btn { padding: 8px 14px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; border-radius: 6px; cursor: pointer; }
.btn.primary { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
#touchpad { display: flex; gap: 8px; padding: 8px 12px; background: #0f1f3a; }
.tbtn { flex: 1; padding: 14px; font-size: 16px; font-weight: 700; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; border-radius: 8px; cursor: pointer; user-select: none; -webkit-user-select: none; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,.9); color: #fff; padding: 8px 14px; border-radius: 6px; opacity: 0; transition: opacity .2s; pointer-events: none; }
#toast.show { opacity: 1; }