/* --- Global Resets --- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; background-color: transparent; /* Keep overlay transparent */ } /* --- Stream Overlay UI --- */ #overlay-container { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; background: #00000099; padding: 0 40px; height: 36px; font-family: 'Inter', sans-serif; color: white; overflow: hidden; } .stat-box { display: none; align-items: center; justify-content: flex-start; height: 100%; min-width: 110px; } .value-row { display: flex; align-items: baseline; justify-content: flex-start; gap: 0px; } .icon-wrapper { width: 16px; height: 16px; margin-right: 8px; display: flex; align-items: center; flex-shrink: 0; transform: translateY(1px); } .icon-wrapper svg { width: 100%; height: 100%; fill: white; opacity: 0.9; } .value { font-size: 22px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .unit { font-size: 11px; font-weight: 400; opacity: 0.6; margin-left: 1px; } #neighborhood { white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; font-size: 22px; min-width: 300px; } /* --- Settings & Control UI (Mobile Friendly) --- */ /* This only triggers when is used */ body.settings-page { overflow: auto; background-color: #121212 !important; /* Force dark background for settings */ display: flex; flex-direction: column; align-items: center; padding: 20px; font-family: 'Inter', sans-serif; height: auto; min-height: 100vh; } .settings-card { background: #1e1e1e; border: 1px solid #333; border-radius: 16px; padding: 24px; width: 100%; max-width: 380px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); margin-top: 40px; text-align: center; } .settings-card h1 { margin: 0 0 15px 0; font-size: 1.2rem; color: #00ffcc; text-transform: uppercase; letter-spacing: 1px; } .settings-stat-label { font-size: 0.9rem; color: #888; margin-bottom: 5px; } .settings-stat-value { font-size: 2.5rem; font-weight: 700; margin-bottom: 25px; color: white; font-variant-numeric: tabular-nums; } .btn-danger { width: 100%; padding: 20px; background: #ff4757; color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: transform 0.1s, background 0.2s; box-shadow: 0 4px 0 #b33939; -webkit-tap-highlight-color: transparent; /* Clean up mobile taps */ } .btn-danger:active { transform: translateY(2px); box-shadow: 0 2px 0 #b33939; background: #ff6b81; } .settings-status { margin-top: 20px; font-size: 0.8rem; color: #666; font-style: italic; }