:root{--bg-dark: #080a12;--bg-card: rgba(14, 18, 32, .85);--neon-cyan: #00f0f0;--neon-pink: #ff0055;--neon-green: #00ffaa;--neon-yellow: #f0f000;--text-main: #f0f4fc;--text-dim: #8b9bb4;--border-neon: rgba(0, 240, 240, .35);--border-active: rgba(0, 240, 240, .85);--font-display: "Orbitron", sans-serif;--font-mono: "Share Tech Mono", monospace;--font-ui: "Rajdhani", sans-serif}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}html,body{width:100%;height:100%;background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-ui);overflow:hidden}#app{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;background:radial-gradient(circle at 50% 20%,#151a30,#080a12);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.hud-root{width:100%;max-width:480px;height:100%;display:flex;flex-direction:column;padding:8px 12px;gap:8px;overflow:hidden;position:relative}.hud-top-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-neon);border-radius:10px;box-shadow:0 0 15px #00f0f026;flex-shrink:0}.brand{display:flex;align-items:center;gap:6px}.logo-text{font-family:var(--font-display);font-size:.95rem;font-weight:900;letter-spacing:1px;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 10px rgba(0,240,240,.3)}.top-controls{display:flex;gap:6px}.icon-btn,.btn-secondary{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text-main);padding:4px 9px;border-radius:6px;font-family:var(--font-ui);font-weight:700;font-size:.75rem;cursor:pointer;transition:all .2s ease}.btn-install-glow{background:#0fa3;border-color:var(--neon-green);color:var(--neon-green);box-shadow:0 0 10px #0fa6;animation:pulse-glow 2s infinite alternate}@keyframes pulse-glow{0%{box-shadow:0 0 6px #0fa6}to{box-shadow:0 0 16px #0fac}}.icon-btn:hover,.btn-secondary:hover{background:#00f0f033;border-color:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan)}.hud-slim-strip{display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-neon);border-radius:10px;padding:6px 10px;gap:8px;box-shadow:0 4px 15px #0006;flex-shrink:0}.hud-preview-box{display:flex;flex-direction:column;align-items:center;background:#ffffff08;border:1px solid rgba(0,240,240,.2);border-radius:8px;padding:3px 6px;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.hud-preview-box.interactive:active{transform:scale(.95);border-color:var(--neon-cyan);background:#00f0f026}.box-label{font-family:var(--font-display);font-size:.58rem;font-weight:800;color:var(--neon-cyan);letter-spacing:.5px}.tap-indicator{font-size:.5rem;color:var(--neon-yellow);margin-left:2px}.hud-stats-pills{flex:1;display:flex;justify-content:space-around;align-items:center;background:#00000040;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:4px 8px}.stat-pill{display:flex;flex-direction:column;align-items:center}.stat-title{font-size:.55rem;color:var(--text-dim);font-weight:700}.stat-value{font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:#fff}.stat-value.highlight{color:var(--neon-yellow)}.hud-stage-wrapper{flex:1;width:100%;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;margin:2px 0}.pixi-viewport{border-radius:12px;overflow:hidden;border:2px solid var(--border-neon);box-shadow:0 0 25px #00f0f040;touch-action:none;position:relative}.pip-cctv-card{position:absolute;top:10px;right:10px;background:#0a0c16eb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--neon-pink);border-radius:8px;padding:4px;display:flex;flex-direction:column;align-items:center;z-index:20;box-shadow:0 0 15px #f056;transition:all .3s ease}.pip-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:4px;margin-bottom:2px;padding:0 2px}.pip-title{font-family:var(--font-display);font-size:.55rem;font-weight:800;color:var(--neon-pink);display:flex;align-items:center;gap:3px}.pip-rec{width:5px;height:5px;background-color:var(--neon-pink);border-radius:50%;animation:blink 1s infinite alternate}.cctv-viewport{width:50px;height:100px;background:#000;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,0,85,.3)}.overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#080a12e6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;z-index:50;border-radius:10px;gap:12px}.overlay-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;width:100%;max-width:290px}.overlay-title{font-family:var(--font-display);font-size:1.2rem;font-weight:900;letter-spacing:1.5px;color:var(--neon-cyan);text-shadow:0 0 15px var(--neon-cyan);animation:pulse-title 2s infinite alternate}@keyframes pulse-title{0%{text-shadow:0 0 10px var(--neon-cyan)}to{text-shadow:0 0 25px var(--neon-cyan),0 0 35px var(--neon-cyan)}}.overlay-subtitle{font-size:.78rem;color:var(--text-dim);font-weight:600}.overlay-mode-select{display:flex;gap:6px;width:100%;margin:4px 0}.overlay-mode-select .mode-btn{flex:1;padding:10px 4px;font-size:.78rem;border-radius:8px;touch-action:manipulation}.btn-overlay-start{background:linear-gradient(90deg,#00f0f0,#0fa);color:#000;font-family:var(--font-display);font-weight:900;font-size:.95rem;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;letter-spacing:1px;box-shadow:0 0 20px #0fa9;transition:transform .15s ease;width:100%;touch-action:manipulation}.btn-overlay-start:active{transform:scale(.96)}.hud-action-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-neon);border-radius:10px;gap:6px;flex-shrink:0}.mode-tabs{display:flex;gap:4px;flex:1}.mode-btn{flex:1;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:var(--text-dim);padding:8px 4px;border-radius:6px;font-family:var(--font-ui);font-weight:700;font-size:.75rem;cursor:pointer;text-align:center;transition:all .2s ease;white-space:nowrap;touch-action:manipulation}.mode-btn.active{background:#00f0f040;border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 10px #00f0f080}.chat-overlay-container{position:fixed;bottom:8px;left:8px;width:240px;background:#0a0c16f2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-neon);border-radius:8px;display:flex;flex-direction:column;z-index:100;box-shadow:0 8px 25px #0009;transition:all .25s ease}.chat-overlay-container.collapsed{height:30px;width:120px;overflow:hidden}.chat-header{height:30px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#ffffff0a}.chat-title{font-family:var(--font-display);font-size:.6rem;font-weight:800;color:var(--neon-cyan)}.chat-badge{background:var(--neon-pink);color:#fff;font-size:.55rem;font-weight:800;padding:1px 4px;border-radius:6px}.chat-toggle-btn{background:none;border:none;color:var(--text-dim);font-size:.65rem;cursor:pointer}.chat-body{height:150px;display:flex;flex-direction:column;padding:6px;gap:4px}.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;font-size:.7rem}.chat-msg-item{line-height:1.25}.chat-time{color:var(--text-dim);font-size:.6rem;margin-right:3px}.chat-username{color:var(--neon-green);font-weight:700;margin-right:3px}.chat-text{color:#fff}.chat-input-row{display:flex;gap:4px}.chat-input-row input{flex:1;background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:#fff;padding:4px 6px;border-radius:4px;font-family:var(--font-ui);font-size:.7rem;outline:none}.chat-send-btn{background:var(--neon-cyan);color:#000;font-weight:800;font-size:.65rem;border:none;padding:0 6px;border-radius:4px;cursor:pointer}.settings-body{display:flex;flex-direction:column;gap:16px;margin-top:8px}.settings-section{display:flex;flex-direction:column;gap:8px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px}.section-label{font-family:var(--font-display);font-size:.7rem;font-weight:800;color:var(--neon-cyan)}.section-desc{font-size:.75rem;color:var(--text-dim);line-height:1.3}.btn-primary-action{background:linear-gradient(90deg,#00f0f0,#0fa);color:#000;font-family:var(--font-display);font-weight:900;font-size:.85rem;padding:10px 16px;border:none;border-radius:6px;cursor:pointer;box-shadow:0 0 15px #0fa6;transition:transform .15s ease;width:100%;margin-top:4px}.btn-primary-action:active{transform:scale(.97)}.status-info-text{font-size:.7rem;color:var(--neon-cyan);font-weight:700}.skin-options{display:flex;flex-direction:column;gap:6px}.skin-opt-btn{display:flex;flex-direction:column;align-items:flex-start;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);padding:8px 10px;border-radius:6px;color:#fff;cursor:pointer;text-align:left;transition:all .2s ease}.skin-opt-btn.active{border-color:var(--neon-cyan);background:#00f0f026}.skin-title{font-family:var(--font-display);font-size:.78rem;font-weight:800;color:var(--neon-cyan)}.skin-desc{font-size:.68rem;color:var(--text-dim)}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-card{width:92%;max-width:440px;max-height:80vh;display:flex;flex-direction:column;background:var(--bg-dark);border:2px solid var(--neon-cyan);border-radius:12px;padding:16px;box-shadow:0 0 30px #00f0f04d}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:var(--font-display);flex-shrink:0}.close-btn{background:none;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer}.leaderboard-tabs{display:flex;gap:6px;margin-bottom:10px;width:100%;flex-shrink:0}.lb-tab-btn{flex:1;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:var(--text-dim);padding:8px 6px;border-radius:6px;font-family:var(--font-ui);font-weight:700;font-size:.78rem;cursor:pointer;text-align:center;transition:all .2s ease;touch-action:manipulation}.lb-tab-btn.active{background:#00f0f040;border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 10px #00f0f080}.modal-body{flex:1;overflow-y:auto;margin-top:4px;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--neon-cyan) rgba(255,255,255,.05);-webkit-overflow-scrolling:touch}.modal-body::-webkit-scrollbar{width:5px}.modal-body::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.modal-body::-webkit-scrollbar-thumb{background:var(--neon-cyan);border-radius:4px}.leaderboard-table{width:100%;border-collapse:collapse;font-size:.82rem}.leaderboard-table thead{position:sticky;top:0;background:var(--bg-dark);z-index:2}.leaderboard-table th{text-align:left;padding:6px 8px;color:var(--text-dim);font-family:var(--font-display);font-size:.65rem;border-bottom:1px solid rgba(255,255,255,.1)}.leaderboard-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.05)}.rank-cell{font-family:var(--font-mono);font-weight:700;color:var(--neon-cyan)}.player-cell{font-weight:700;color:#fff}.score-cell{font-family:var(--font-mono);font-weight:700;color:var(--neon-green)}.score-cell.highlight{color:var(--neon-yellow)}.mobile-touch-hud{display:none!important}