* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0a0f1f; color: #e6edf7; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
#app { display: grid; place-items: center; height: 100%; padding: 16px; }
#game { width: 100%; max-width: 480px; height: auto; border: 2px solid #1b2340; background: #000; box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
#screen { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.overlay { pointer-events: auto; width: 100%; max-width: 520px; padding: 20px; background: rgba(10, 15, 31, 0.9); border: 1px solid #273053; backdrop-filter: blur(6px); border-radius: 10px; }
.title { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.btns { display: grid; gap: 10px; }
.btn { padding: 12px 16px; border: 1px solid #33406b; background: #162042; color: #e6edf7; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn:hover { background: #1b2750; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.label { opacity: 0.9; }
.select, .range { flex: 1; }
.hud { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 480px; max-width: 100%; display: flex; justify-content: space-between; align-items: center; color: #e6edf7; padding: 0 8px; pointer-events: none; font-weight: 600; }
.hud .chip { background: rgba(22,32,66,0.8); border: 1px solid #33406b; padding: 6px 8px; border-radius: 6px; }
.levelbar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 300px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.levelbar .fill { height: 100%; background: linear-gradient(90deg,#3ac7ff,#46ffb1); width: 0%; }