:root{--bg-app:#f4f6f8;--bg-container:#fff;--bg-card:#f8fafc;--bg-dark-card:#0b3d2e;--bg-input:#f1f5f9;--border-color:#e2e8f0;--border-focus:#0b3d2e;--color-primary:#0b3d2e;--color-accent:#2f80ed;--color-danger:#eb5757;--color-success:#27ae60;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"Space Grotesk", monospace;--shadow-soft:0 4px 18px #0000000a;--shadow-card:0 6px 20px #0b3d2e14;--shadow-glow:0 10px 40px #0000001f;--nav-height:72px;--header-height:76px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{font-family:var(--font-sans);color:var(--text-primary);background-color:#eef1f4;height:100%;overflow:hidden}#app{background-color:var(--bg-app);max-width:480px;height:100%;box-shadow:var(--shadow-glow);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);flex-direction:column;margin:0 auto;display:flex;position:relative;overflow:hidden}@media (width>=481px){body{background:radial-gradient(circle,#cbd5e1 0%,#94a3b8 100%);justify-content:center;align-items:center;display:flex}#app{border:1px solid var(--border-color);border-radius:28px;height:92vh}}.status-banner{text-align:center;z-index:1000;background-color:var(--color-danger);color:#fff;padding:8px 12px;font-size:.8rem;font-weight:600;animation:.3s slideDown;position:absolute;top:0;left:0;right:0}.status-banner.success{background-color:var(--color-success)}.status-banner.hidden{display:none}.app-header{height:var(--header-height);background-color:var(--bg-container);border-bottom:1px solid var(--border-color);z-index:100;box-shadow:var(--shadow-soft);justify-content:space-between;align-items:center;padding:0 20px;display:flex}.header-logo{align-items:center;gap:12px;display:flex}.logo-emoji{filter:drop-shadow(0 2px 4px #0b3d2e33);font-size:1.8rem}.header-logo h1{font-family:var(--font-mono);letter-spacing:.5px;color:var(--color-primary);font-size:1.2rem;font-weight:700}.header-logo p{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-top:1px;font-size:.65rem;font-weight:700}.stat-badge{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;align-items:center;padding:6px 12px;display:flex}.stat-label{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px;font-size:.6rem;font-weight:600}.stat-value{font-family:var(--font-mono);color:var(--color-primary);font-size:.95rem;font-weight:700}.app-main{padding:20px;padding-bottom:calc(var(--nav-height) + 20px);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.app-view{animation:.4s forwards fadeIn;display:none}.app-view.active{flex-direction:column;gap:20px;display:flex}.view-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.view-title{font-family:var(--font-mono);color:var(--text-primary);letter-spacing:.5px;font-size:1.3rem;font-weight:700}button,.btn{cursor:pointer;font-family:var(--font-sans);border:none;border-radius:14px;outline:none;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-primary{background:linear-gradient(135deg, var(--color-primary) 0%, #06231a 100%);color:#fff;width:100%;padding:14px 24px;font-size:.95rem;box-shadow:0 4px 12px #0b3d2e33}.btn-primary:active{opacity:.95;transform:scale(.98)}.btn-primary:disabled{color:#94a3b8;box-shadow:none;cursor:not-allowed;background:#cbd5e1}.btn-secondary{background-color:var(--bg-container);border:1px solid var(--border-color);color:var(--text-primary);box-shadow:var(--shadow-soft);align-items:center;gap:8px;padding:10px 18px;font-size:.85rem;display:flex}.btn-secondary:active{background-color:var(--bg-card)}.btn-danger{color:var(--color-danger);background-color:#eb57571a;border:1px solid #eb57574d;width:100%;padding:14px 24px;font-size:.95rem}.btn-danger:active{background-color:#eb575733}.btn-icon{font-size:1.1rem}.search-container{width:180px;position:relative}.search-container input{background-color:var(--bg-container);border:1px solid var(--border-color);width:100%;color:var(--text-primary);box-shadow:var(--shadow-soft);border-radius:10px;outline:none;padding:8px 32px 8px 12px;font-size:.85rem;transition:all .25s}.search-container input:focus{border-color:var(--border-focus);width:200px;transform:translate(-20px)}.clear-search-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;font-size:1.2rem;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.clear-search-btn.hidden{display:none}.leaderboard-container{background-color:var(--bg-container);border:1px solid var(--border-color);box-shadow:var(--shadow-soft);border-radius:20px;flex-direction:column;display:flex;overflow:hidden}.leaderboard-header{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px;grid-template-columns:36px 1fr 64px 64px 64px;padding:14px 16px;font-size:.7rem;font-weight:700;display:grid}.leaderboard-list{flex-direction:column;display:flex}.leaderboard-row{border-bottom:1px solid var(--border-color);cursor:pointer;grid-template-columns:36px 1fr 64px 64px 64px;align-items:center;padding:16px;transition:background-color .15s;display:grid}.leaderboard-row:last-child{border-bottom:none}.leaderboard-row:active{background-color:var(--bg-card)}.col-rank{font-family:var(--font-mono);color:var(--text-secondary);justify-content:center;font-size:.95rem;font-weight:700;display:flex}.leader-1 .col-rank{color:#f2c94c;font-size:1.2rem}.leader-2 .col-rank{color:#7f8c8d;font-size:1.1rem}.leader-3 .col-rank{color:#d35400;font-size:1.05rem}.col-name{text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);padding-left:8px;font-size:.9rem;font-weight:600;overflow:hidden}.col-record,.col-winrate{color:var(--text-secondary);text-align:center;font-size:.8rem}.col-rating{font-family:var(--font-mono);color:var(--color-primary);text-align:right;padding-right:4px;font-size:.95rem;font-weight:700}.leader-1 .col-name{font-weight:700}.loading-state,.empty-state{text-align:center;color:var(--text-secondary);padding:40px 20px;font-size:.9rem}.match-form{flex-direction:column;gap:24px;display:flex}.player-selectors-grid{background-color:var(--bg-container);border:1px solid var(--border-color);box-shadow:var(--shadow-soft);border-radius:18px;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:16px 12px;display:grid}.selector-box{flex-direction:column;gap:8px;display:flex}.selector-box label{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px;padding-left:2px;font-size:.7rem;font-weight:700}.custom-select-wrapper{width:100%;position:relative}.custom-select-wrapper select{appearance:none;background-color:var(--bg-input);border:1px solid var(--border-color);width:100%;color:var(--text-primary);cursor:pointer;border-radius:12px;outline:none;padding:12px 10px;font-size:.85rem;font-weight:600}.custom-select-wrapper select:focus{border-color:var(--border-focus)}.custom-select-wrapper:after{content:"▾";color:var(--text-secondary);pointer-events:none;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.vs-divider{font-family:var(--font-mono);color:var(--text-muted);margin-top:18px;font-size:1.1rem;font-weight:700}.score-input-container h3,.elo-simulation-panel h3{font-family:var(--font-mono);text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px;margin-bottom:12px;font-size:.9rem}.score-inputs-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.score-input-box{background-color:var(--bg-container);border:1px solid var(--border-color);box-shadow:var(--shadow-soft);border-radius:14px;flex-direction:column;gap:8px;padding:12px;display:flex}.score-input-box label{color:var(--text-secondary);font-size:.65rem;font-weight:600}.score-input-box input{border:none;border-bottom:2px solid var(--border-color);color:var(--text-primary);font-size:1.3rem;font-weight:700;font-family:var(--font-mono);text-align:center;background:0 0;outline:none;width:100%;padding:4px 0}.score-input-box input:focus{border-color:var(--border-focus)}.elo-simulation-panel{flex-direction:column;animation:.3s slideUp;display:flex}.simulation-sub{color:var(--text-secondary);margin-top:-8px;margin-bottom:12px;font-size:.75rem}.simulation-cards{grid-template-columns:1fr 1fr;gap:16px;display:grid}.sim-card{background-color:var(--bg-container);border:1px solid var(--border-color);text-align:center;box-shadow:var(--shadow-soft);border-radius:18px;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;display:flex;position:relative;overflow:hidden}.sim-name{color:var(--text-primary);font-size:.9rem;font-weight:700}.sim-elo-preview{flex-direction:column;align-items:center;display:flex}.sim-label{color:var(--text-secondary);text-transform:uppercase;margin-bottom:2px;font-size:.6rem}.sim-value{font-family:var(--font-mono);color:var(--color-primary);font-size:1.25rem;font-weight:700}.sim-diff{font-family:var(--font-mono);margin-top:2px;font-size:.75rem;font-weight:700}.sim-diff.positive{color:var(--color-accent)}.sim-diff.negative{color:var(--color-danger)}.sim-action-badge{background-color:var(--bg-card);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;padding:4px;font-size:.6rem;font-weight:700;position:absolute;bottom:0;left:0;right:0}.sim-card.winner-selected{background-color:var(--bg-dark-card);border-color:var(--bg-dark-card);box-shadow:var(--shadow-card)}.sim-card.winner-selected .sim-name,.sim-card.winner-selected .sim-value,.sim-card.winner-selected .sim-label{color:#fff}.sim-card.winner-selected .sim-diff{color:#00f5ff}.sim-card.winner-selected .sim-action-badge{color:#fff;background-color:#05261d}.sim-card.loser-selected{border-color:var(--border-color);opacity:.85}.sim-card.loser-selected .sim-diff{color:var(--color-danger)}.matches-list{flex-direction:column;gap:12px;display:flex}.match-log-card{background:linear-gradient(135deg, var(--bg-dark-card) 0%, #06231a 100%);box-shadow:var(--shadow-card);border:1px solid #082d22;border-radius:20px;flex-direction:column;gap:12px;padding:16px;display:flex}.match-log-header{color:#ffffff80;justify-content:space-between;font-size:.7rem;font-weight:600;display:flex}.match-log-header .match-id{font-family:var(--font-mono);color:#00f5ff;font-weight:700}.match-log-versus{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.match-log-player{color:#ffffffb3;flex-direction:column;display:flex}.match-log-player.left-player{text-align:left}.match-log-player.right-player{text-align:right}.player-log-name{text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:600;overflow:hidden}.winner-highlight .player-log-name{color:#fff;font-weight:700}.match-log-scores{background-color:#0003;border:1px solid #ffffff0d;border-radius:12px;align-items:center;gap:8px;padding:6px 14px;display:flex}.log-score-num{font-family:var(--font-mono);color:#fff9;font-size:1rem;font-weight:700}.winner-highlight .log-score-num{color:#00f5ff}.log-score-vs{color:#ffffff4d;font-size:.65rem;font-weight:600}.settings-card{background-color:var(--bg-container);border:1px solid var(--border-color);box-shadow:var(--shadow-soft);border-radius:18px;flex-direction:column;gap:12px;padding:20px;display:flex}.settings-card h3{font-family:var(--font-mono);text-transform:uppercase;color:var(--text-primary);letter-spacing:.5px;font-size:.95rem}.settings-desc{color:var(--text-secondary);font-size:.75rem;line-height:1.4}.settings-form{gap:12px;margin-top:4px;display:flex}.settings-form input{background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);border-radius:12px;outline:none;flex:1;padding:12px 16px;font-size:.85rem}.settings-form input:focus{border-color:var(--border-focus)}.settings-form button{width:auto;padding:0 20px}.caution-card{border-color:#eb575733}.caution-card h3{color:var(--color-danger)}.info-row{border-bottom:1px solid var(--border-color);justify-content:space-between;padding:6px 0;font-size:.8rem;display:flex}.info-row:last-child{border-bottom:none}.info-row span{color:var(--text-secondary)}.info-row strong{color:var(--text-primary)}.bottom-nav{height:var(--nav-height);background-color:var(--bg-container);border-top:1px solid var(--border-color);z-index:500;justify-content:space-around;align-items:center;padding:0 10px;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -4px 15px #00000008}.nav-item{color:var(--text-muted);background:0 0;border:none;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:72px;height:54px;display:flex}.nav-icon{filter:grayscale()opacity(.4);font-size:1.3rem;transition:all .25s}.nav-label{letter-spacing:.3px;font-size:.65rem;font-weight:600;transition:all .25s}.nav-item.active{color:var(--color-primary)}.nav-item.active .nav-icon{filter:grayscale(0)opacity()drop-shadow(0 2px 4px #0b3d2e26)}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#03070c66;align-items:flex-end;animation:.2s fadeIn;display:flex;position:absolute;inset:0}.modal-overlay.hidden{display:none}.modal-container{background-color:var(--bg-container);border-top:1px solid var(--border-color);border-top-left-radius:28px;border-top-right-radius:28px;flex-direction:column;width:100%;max-height:80%;animation:.35s cubic-bezier(.16,1,.3,1) slideUp;display:flex;overflow:hidden;box-shadow:0 -8px 30px #00000014}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:20px;display:flex}.modal-header h3{font-family:var(--font-mono);font-size:1.15rem;font-weight:700}.close-modal-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1.8rem;line-height:1}.modal-body{flex-direction:column;flex:1;gap:20px;padding:20px 20px 40px;display:flex;overflow-y:auto}.modal-stats-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.modal-stat-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;display:flex}.modal-stat-num{font-family:var(--font-mono);color:var(--color-primary);font-size:1.05rem;font-weight:700}.modal-stat-label{text-transform:uppercase;color:var(--text-secondary);font-size:.6rem;font-weight:600}.sparkline-section h4,.modal-history-section h4{font-family:var(--font-mono);text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px;margin-bottom:10px;font-size:.75rem}.chart-subtext{font-family:var(--font-sans);text-transform:none;color:var(--text-muted);font-size:.65rem}.sparkline-container{background-color:var(--bg-input);border:1px solid var(--border-color);border-radius:14px;padding:16px;position:relative}#player-sparkline{width:100%;height:60px;display:block}#player-sparkline path{stroke:var(--color-primary)}.sparkline-points circle{fill:var(--color-primary);stroke:var(--bg-input);stroke-width:1.5px}.sparkline-labels{font-family:var(--font-mono);color:var(--text-secondary);justify-content:space-between;margin-top:6px;font-size:.65rem;font-weight:600;display:flex}.modal-match-list{flex-direction:column;gap:8px;display:flex}.modal-match-row{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;justify-content:space-between;align-items:center;padding:12px;font-size:.8rem;display:flex}.modal-match-opponent{color:var(--text-primary);font-weight:600}.modal-match-outcome{text-transform:uppercase;font-size:.7rem;font-weight:700}.modal-match-outcome.win{color:var(--color-success)}.modal-match-outcome.loss{color:var(--color-danger)}.modal-match-elo-row{align-items:center;gap:8px;display:flex}.modal-match-elo-val{font-family:var(--font-mono);color:var(--text-secondary);font-weight:600}.modal-match-elo-diff{font-family:var(--font-mono);font-weight:700}.modal-match-elo-diff.win{color:var(--color-success)}.modal-match-elo-diff.loss{color:var(--color-danger)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.admin-lock-btn{border:1.5px solid var(--border-color);width:38px;height:38px;color:var(--text-secondary);box-shadow:var(--shadow-soft);background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;transition:all .2s;display:flex}.admin-lock-btn:active{background-color:var(--bg-card);border-color:var(--border-focus)}.admin-lock-btn.unlocked{border-color:var(--color-success);box-shadow:0 0 10px #27ae6026}.admin-only.hidden-admin{display:none!important}