:root { font-family: system-ui, sans-serif; color: #334b40; background: #a1bd83; }
html, body, #app { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; }
main { position: relative; width: 100%; height: 100dvh; }
header { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; pointer-events: none; }
h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
header span, p { font-size: .875rem; }
canvas { display: block; width: 100%; height: 100%; background: #a1bd83; image-rendering: pixelated; }
canvas:focus-visible { outline: 2px solid #334b40; outline-offset: -2px; }
.connection-status { position: absolute; bottom: 16px; left: 16px; right: 16px; margin: 0; padding: 12px 16px; background: #f6f7f1ed; border-radius: 8px; }
.loading { height: 100dvh; margin: 0; display: grid; place-items: center; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; z-index: 2; padding: 16px; background: #fff1dd; }
@media (max-width: 540px) { header { align-items: start; flex-direction: column; gap: 6px; } }