@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap";:root{--bg-color:#050505;--space-color:#0f0c1d;--cyan:#29f1ff;--pink:#ff3dc5;--purple:#ab57ff;--gold:#ffd83d;--red:#ff294d;--glass:#ffffff14;--glass-border:#ffffff1f;--font-outfit:"Outfit", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#app,canvas{touch-action:none}body,html{background-color:var(--bg-color);width:100vw;height:100dvh;font-family:var(--font-outfit);color:#fff;-webkit-user-select:none;user-select:none;overscroll-behavior:none;background-image:url(../bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;overflow:hidden}#app{border:1px solid var(--glass-border);background-image:url(../bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:20px;justify-content:center;align-items:center;width:100%;max-width:600px;height:100%;max-height:850px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 50px #00f0ff0d}#app:before{content:"";background-image:radial-gradient(var(--glass-border) 1px, transparent 0), radial-gradient(var(--glass-border) 1.5px, transparent 0);opacity:.15;pointer-events:none;background-position:0 0,20px 20px;background-size:40px 40px;position:absolute;inset:0}canvas{z-index:1;display:block}.overlay-screen{z-index:10;-webkit-backdrop-filter:blur(8px);background:#05050866;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;transition:opacity .3s;display:none;position:absolute;top:0;left:0}.overlay-screen.active{display:flex}.glass-panel{border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);background:#0a0a0fb3;border-radius:20px;flex-direction:column;gap:20px;width:100%;max-width:440px;padding:30px;animation:.4s cubic-bezier(.16,1,.3,1) forwards panel-fade-in;display:flex;box-shadow:0 8px 32px #00000080}@keyframes panel-fade-in{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.neon-headline{text-transform:uppercase;letter-spacing:2px;background:linear-gradient(135deg, #fff 0%, var(--cyan) 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 15px #00f0ff4d;-webkit-background-clip:text;font-size:32px;font-weight:800}.neon-subtitle{letter-spacing:1.5px;text-transform:uppercase;color:var(--pink);font-size:16px;font-weight:600}.sub-headline{color:#ffffffb3;font-size:14px;line-height:1.5}.logo-header{color:#fff;letter-spacing:1px;font-size:18px;font-weight:800}.kisy-brand{color:var(--cyan)}button{font-family:var(--font-outfit);cursor:pointer;border-radius:12px;outline:none;transition:all .2s}.btn-play{text-transform:uppercase;color:#fff;background:linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);border:1px solid #ffffff26;padding:16px 24px;font-size:18px;font-weight:800}.btn-play:hover{transform:translateY(-2px);box-shadow:0 0 20px #00f0ff73}.btn-play:active{transform:translateY(0)}.btn-secondary{color:#ffffffd9;background:var(--glass);border:1px solid var(--glass-border);padding:12px 18px;font-size:14px;font-weight:600}.btn-secondary:hover{color:#fff;background:#ffffff26}.input-group{gap:10px;width:100%;display:flex}input[type=text]{font-family:var(--font-outfit);color:#fff;border:1px solid var(--glass-border);background:#05050899;border-radius:12px;outline:none;flex:1;padding:14px;font-size:16px;font-weight:600}input[type=text]::placeholder{color:#ffffff73;font-size:14px}input[type=text]:focus{border-color:var(--cyan)}.disclaimer-text{color:#ffffff73;padding:0 10px;font-size:11px;line-height:1.4}.legal-links{color:#ffffff80;font-size:12px}.legal-link{cursor:pointer;text-decoration:underline}.legal-link:hover{color:var(--cyan)}.control-row{justify-content:center;display:flex}.control-badge{background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600}.control-badge:hover{border-color:var(--cyan)}.hud-layer{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}.hud-layer *{pointer-events:auto}.hud-header-bar{top:env(safe-area-inset-top,16px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);z-index:20;pointer-events:auto;background:#0a0a0fb3;justify-content:space-between;align-items:center;width:100%;height:44px;padding:0 16px;display:flex;position:absolute;left:0}.hud-stats-compact{color:#fff;font-family:var(--font-outfit);flex:1;justify-content:center;align-items:center;gap:8px;font-size:13px;font-weight:800;display:flex}.hud-stats-compact .stat-item{align-items:center;gap:4px;display:flex}.hud-stats-compact .stat-item .label{color:#ffffff73;letter-spacing:.5px;font-size:8px;font-weight:800}.hud-stats-compact .stat-item .value{font-size:13px;font-weight:800}.hud-stats-compact .stat-divider{color:#ffffff26;font-size:14px;font-weight:300}.hud-controls-right{align-items:center;gap:8px;display:flex}.text-cyan{color:var(--cyan)}.text-pink{color:var(--pink)}.text-red{color:var(--red)}.text-purple{color:var(--purple)}.icon-btn{background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(8px);cursor:pointer;z-index:20;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.icon-btn svg{stroke:#fff;fill:none;pointer-events:none;width:16px;height:16px}.icon-btn:hover{border-color:var(--cyan);background:#00f0ff26;transform:scale(1.05)}.hud-header-bar .back-btn,.hud-header-bar .music-btn,.hud-header-bar .pause-btn{position:static!important}.live-rank-badge{top:calc(env(safe-area-inset-top,16px) + 54px);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(8px);color:#fff;z-index:19;background:#0a0a0fb3;border-radius:8px;padding:4px 8px;font-size:10px;font-weight:600;transition:all .3s;position:absolute;left:16px;box-shadow:0 4px 12px #0000004d}.live-rank-badge.active{color:var(--cyan);border-color:#0ff6}.live-rank-badge.active.top-ten{animation:3s ease-in-out infinite rank-pulse;box-shadow:0 0 8px #00ffff26}@keyframes rank-pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.brief-ranks-list{border:1px solid var(--glass-border);background:#05050899;border-radius:12px;flex-direction:column;gap:6px;width:100%;padding:10px 15px;display:flex}.brief-rank-item{border-bottom:1px solid #ffffff0d;justify-content:space-between;padding:4px 0;font-size:13px;display:flex}.brief-rank-item:last-child{border:none}.brief-rank-item .pos{color:var(--cyan);width:30px;font-weight:800}.brief-rank-item .name{text-align:left;flex:1;font-weight:600}.brief-rank-item .score{color:var(--gold);font-weight:800}.self-highlight{background:#00f0ff26;border-radius:6px;padding:4px 6px}.ranks-scroll-container{border:1px solid var(--glass-border);background:#05050880;border-radius:12px;max-height:350px;padding:10px;overflow-y:auto}.loading-indicator{text-align:center;color:var(--cyan);padding:30px;font-weight:600}.modal-body-scroll{color:#fffc;white-space:pre-line;max-height:250px;padding-right:8px;font-size:13px;line-height:1.5;overflow-y:auto}.modal-body-scroll::-webkit-scrollbar{width:6px}.modal-body-scroll::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}.full-width{width:100%}.text-center{text-align:center}.hidden{display:none!important}.pulse-glow{animation:2s infinite alternate glow-pulse-effect}@keyframes glow-pulse-effect{0%{box-shadow:0 0 15px #00f0ff26}to{box-shadow:0 0 25px #00f0ff59}}.level-progress-line-container{top:calc(env(safe-area-inset-top,16px) + 44px);z-index:20;background:#ffffff0d;width:100%;height:4px;position:absolute;left:0;overflow:hidden}.level-progress-line-fill{background:linear-gradient(90deg, var(--cyan), var(--pink));width:0%;height:100%;box-shadow:0 0 8px var(--pink);transition:width .3s cubic-bezier(.1,.8,.2,1)}