* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body, html {
 width: 100%;
 height: 100%;
 height: 100dvh; /* Mobile dynamic viewport: eliminates address-bar jumping */
 overflow: hidden;
 background-color: #02020a;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
 color: #fafffa;
}

#canvas-container {
 width: 100vw;
 height: 100vh;
 height: 100dvh;
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 touch-action: none; /* Prevents mobile pull-to-refresh & browser bounce */
}

canvas {
 width: 100% !important;
 height: 100% !important;
 display: block;
 touch-action: none;
 user-select: none;
 -webkit-user-select: none;
}

.hud {
 position: absolute;
 bottom: calc(18px + env(safe-area-inset-bottom, 0px));
 left: 18px;
 z-index: 10;
 pointer-events: none;
 text-transform: uppercase;
 letter-spacing: 1.5px;
}

.hud h1 {
 font-size: 13px;
 font-weight: 700;
 color: #fafffa;
 margin-bottom: 2px;
 text-shadow: 0 0 10px rgba(4, 0, 255, 0.8);
}

.hud p {
 font-size: 10px;
 color: rgba(250, 255, 250, 0.5);
}

/* Mobile-Friendly Tweakpane Position */
.tp-dfwv {
 z-index: 20 !important;
 top: calc(14px + env(safe-area-inset-top, 0px)) !important;
 right: 14px !important;
 max-width: calc(100vw - 28px) !important;
 width: 290px !important;
}