*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:14px;touch-action:manipulation}
body{font-family:'DM Sans','Segoe UI',system-ui,sans-serif;background:#0c0f1a;color:#e2e8f0;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
#root{min-height:100vh;min-height:100dvh}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}
input::placeholder{color:#64748b}
button{font-family:inherit;-webkit-tap-highlight-color:transparent}

.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:9999;display:flex;flex-direction:column;animation:fadeIn .2s ease-out}
.popup-content{display:flex;flex-direction:column;height:100%;height:100dvh;background:#0c0f1a}
.popup-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#131829;border-bottom:2px solid #f97316;flex-shrink:0}
.popup-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:none;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.popup-search{padding:12px 16px;flex-shrink:0;background:#131829}
.popup-search input{width:100%;background:#0c0f1a;border:1px solid #1e293b;border-radius:10px;padding:12px 16px;color:#e2e8f0;font-size:16px;outline:none}
.popup-search input:focus{border-color:#f97316}
.popup-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.popup-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #1e293b;cursor:pointer}
.popup-item:active{background:rgba(249,115,22,0.12)}
.popup-item-active{background:rgba(249,115,22,0.12);border-left:4px solid #f97316}
.popup-rank{font-weight:800;font-size:11px;border-radius:6px;padding:3px 7px;min-width:36px;text-align:center;flex-shrink:0}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.pulse{animation:pulse 2s ease-in-out infinite}
.slide-up{animation:slideUp .2s ease-out}

.tab-bar{display:flex;position:sticky;top:0;z-index:100;background:#0c0f1a;border-bottom:2px solid #f97316;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{flex:1;min-width:0;padding:10px 6px;border:none;background:transparent;color:#94a3b8;font-weight:700;font-size:10px;cursor:pointer;text-align:center;white-space:nowrap}
.tab-btn-active{color:#fff;background:#f97316;border-radius:8px 8px 0 0}

.ccard{background:#131829;border-radius:12px;padding:14px;border:1px solid #1e293b}
.ccard:active{background:#1a1f36}
.ccard-sel{border-color:rgba(249,115,22,0.4);background:rgba(249,115,22,0.08);border-left:4px solid #f97316}

.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-weight:700;font-size:10px;white-space:nowrap}
.bg{background:#22c55e;color:#fff}
.bd{background:#eab308;color:#000}
.bo{background:#ef4444;color:#fff}
.bs{background:#f97316;color:#fff;font-size:8px;padding:1px 6px}
.bw{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;font-size:10px;padding:3px 10px}

.insight{margin-top:14px;background:rgba(249,115,22,0.06);border-radius:10px;padding:14px;border:1px solid rgba(249,115,22,0.2)}
.selector-btn{width:100%;background:#131829;border:2px solid #1e293b;border-radius:12px;padding:14px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;color:#e2e8f0}
.selector-btn:active{border-color:#f97316}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-card{background:rgba(255,255,255,0.04);border-radius:10px;padding:12px;text-align:center;border:1px solid #1e293b}
.cutoff{text-align:center;padding:6px;font-size:10px;font-weight:800;color:#ef4444;letter-spacing:1px;border-top:2px dashed #ef4444;border-bottom:2px dashed #ef4444;background:rgba(239,68,68,0.08);margin:6px 0}
.legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:11px;color:#94a3b8;margin-top:10px}

/* Progress to win bar */
.win-bar-bg{width:100%;height:6px;background:#1e293b;border-radius:3px;margin-top:6px;overflow:hidden}
.win-bar-fill{height:100%;border-radius:3px;transition:width 0.3s}
.win-info{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:9px;color:#64748b}