:root{--bg-deep:#081f14;--bg-mid:#10301f;--bg-card:#fdf8e90f;--gold:#f2c14e;--gold-soft:#f7d98b;--gold-deep:#c99a2e;--cream:#fdf8e9;--text:#f7f1e2;--text-muted:#a9bfae;--red:#e0522f;--green-live:#3fae7f;--green-live-soft:#7fe0b4;--border:#f2c14e2e;--shadow:0 18px 40px #00000059;--radius:18px;--gap:clamp(12px, 1.4vw, 22px);--font-body:"Poppins", system-ui, -apple-system, sans-serif;--font-display:"Playfair Display", Georgia, serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{min-height:100vh;font-family:var(--font-body);color:var(--text);background:radial-gradient(1100px 560px at 88% -12%, #f2c14e1a, transparent 62%), radial-gradient(900px 520px at -12% 112%, #3fae7f24, transparent 62%), linear-gradient(160deg, var(--bg-deep), var(--bg-mid) 55%, #0a1f15);-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0}body:before{content:"";pointer-events:none;opacity:.4;z-index:0;background-image:radial-gradient(circle,#f2c14e0d 1px,#0000 1.7px);background-size:26px 26px;position:fixed;inset:0}.app:before{content:"";background:linear-gradient(90deg, var(--red), var(--gold), var(--green-live), var(--gold), var(--red));z-index:5;height:4px;position:fixed;top:0;left:0;right:0}.app-decor{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.app-decor:before,.app-decor:after{content:"";border:2px dashed #f2c14e1f;border-radius:50%;position:absolute}.app-decor:before{width:520px;height:520px;top:-260px;right:-180px}.app-decor:after{border-color:#3fae7f1f;width:640px;height:640px;bottom:-330px;left:-280px}.app{height:100dvh;position:relative;overflow:hidden}.app-content{z-index:1;gap:var(--gap);flex-direction:column;height:100%;padding:clamp(14px,2.4vh,28px) clamp(16px,3vw,44px) clamp(10px,1.6vh,20px);display:flex;position:relative}button{font-family:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.header{flex-shrink:0}.header-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.brand{align-items:flex-start;gap:14px;display:flex}.brand-title{font-family:var(--font-display);letter-spacing:.2px;background:linear-gradient(120deg, var(--gold-soft), var(--gold) 45%, #ffd97a);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(26px,3.2vw,52px);font-weight:800;line-height:1.12}.brand-subtitle{color:var(--text-muted);max-width:560px;margin:8px 0 0;font-size:clamp(12px,1vw,16px);line-height:1.6}.header-meta{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.live-badge{color:var(--green-live-soft);letter-spacing:1.4px;background:#3fae7f24;border:1px solid #3fae7f66;border-radius:999px;align-items:center;gap:7px;padding:6px 12px;font-size:11.5px;font-weight:700;display:inline-flex}.live-dot{background:var(--green-live);border-radius:50%;width:8px;height:8px;animation:1.8s ease-out infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #3fae7f8c}70%{box-shadow:0 0 0 9px #3fae7f00}to{box-shadow:0 0 #3fae7f00}}.updated-at{color:var(--text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}.refresh-btn{border:1px solid var(--border);width:40px;height:40px;color:var(--gold-soft);cursor:pointer;background:#fdf8e914;border-radius:50%;place-items:center;transition:background .15s,transform .15s,border-color .15s;display:grid}.refresh-btn:hover:not(:disabled){background:#fdf8e929;border-color:#f2c14e66;transform:scale(1.06)}.refresh-btn:disabled{opacity:.7;cursor:default}.spin{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.mock-banner,.error-banner{flex-shrink:0}.mock-banner{color:var(--gold-soft);background:#f2c14e1f;border:1px solid #f2c14e59;border-radius:12px;align-items:flex-start;gap:10px;padding:10px 14px;font-size:13px;line-height:1.55;display:flex}.mock-banner-icon{flex-shrink:0;margin-top:2px}.mock-banner p{margin:0}.mock-banner code{background:#00000047;border-radius:5px;padding:1px 6px;font-size:12px}.error-banner{color:#ffb59f;background:#e0522f1f;border:1px solid #e0522f66;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;font-size:13.5px;display:flex}.error-banner button{color:#ffd6c9;cursor:pointer;background:#e0522f33;border:1px solid #e0522f73;border-radius:8px;margin-left:auto;padding:6px 12px;font-size:12.5px;font-weight:600}.stats{gap:var(--gap);flex-shrink:0;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;align-items:center;gap:12px;padding:clamp(10px,1.2vh,16px) 16px;transition:transform .18s,border-color .18s;display:flex}.stat-card:hover{border-color:#f2c14e52;transform:translateY(-2px)}.stat-icon{width:clamp(36px,3vw,48px);height:clamp(36px,3vw,48px);color:var(--gold);background:#f2c14e1f;border-radius:12px;flex-shrink:0;place-items:center;display:grid}.stat-value{font-size:clamp(20px,2vw,32px);font-weight:700;line-height:1.15;display:block}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-size:11.5px}.dash-grid{gap:var(--gap);flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.25fr);min-height:0;display:grid}.dash-grid.is-searching{grid-template-columns:1fr}.podium{gap:var(--gap);grid-column:1/3;grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:0;display:grid}.podium-first-slot{grid-row:1/3;min-height:0;position:relative}.podium-frame{border-radius:var(--radius);pointer-events:none;background:#f2c14e0d;border:2px dashed #f2c14e66;position:absolute;inset:0;transform:translate(clamp(9px,1vw,18px),clamp(9px,1vw,18px))}.podium-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-card);min-height:0;animation:.5s both pop;animation-delay:calc(var(--i) * .11s);transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}.podium-card:hover{border-color:#f2c14e80;transform:translateY(-3px)}.podium-first-slot .podium-card{position:absolute;inset:0}.podium-first{box-shadow:var(--shadow);border-color:#f2c14e80}.podium-second{border-color:#b9c4cf66}.podium-third{border-color:#d29a6866}.podium-card .portrait-card{object-fit:cover;width:100%;height:100%;transition:transform .5s;position:absolute;inset:0}.podium-card:hover .portrait-card{transform:scale(1.04)}.podium-shade{pointer-events:none;background:linear-gradient(#081f146b 0%,#081f1400 38% 52%,#081f14e6 100%);position:absolute;inset:0}.podium-top{z-index:1;align-items:center;gap:8px;display:flex;position:absolute;top:clamp(12px,1.6vh,18px);left:clamp(12px,1.4vw,18px);right:clamp(12px,1.4vw,18px)}.podium-medal{filter:drop-shadow(0 2px 6px #0000008c);font-size:clamp(26px,2.6vw,44px);line-height:1}.podium-label{text-transform:uppercase;letter-spacing:1.2px;color:var(--cream);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#081f148c;border:1px solid #f2c14e4d;border-radius:999px;padding:5px 12px;font-size:clamp(11px,1vw,15px);font-weight:700}.podium-crown{font-size:clamp(18px,1.8vw,30px);animation:2.4s ease-in-out infinite bob}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.podium-info{z-index:1;flex-direction:column;gap:10px;display:flex;position:absolute;bottom:clamp(14px,1.8vh,20px);left:clamp(14px,1.6vw,20px);right:clamp(14px,1.6vw,20px)}.podium-name{font-family:var(--font-display);color:#fff;text-shadow:0 2px 10px #0009;margin:0;font-size:clamp(20px,2vw,36px);font-weight:800}.podium-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.avatar{color:#12261b;background:linear-gradient(135deg, hsl(var(--avatar-hue) 72% 68%), hsl(calc(var(--avatar-hue) + 32) 72% 54%));-webkit-user-select:none;user-select:none;border-radius:50%;flex-shrink:0;place-items:center;width:clamp(40px,3.4vw,56px);height:clamp(40px,3.4vw,56px);font-size:clamp(16px,1.3vw,22px);font-weight:700;display:grid;box-shadow:inset 0 0 0 2px #ffffff38,0 4px 10px #0000004d}.avatar-md{width:clamp(36px,3vw,48px);height:clamp(36px,3vw,48px);font-size:clamp(15px,1.1vw,19px)}.avatar-lg{width:66px;height:66px;font-size:26px}.avatar-photo{object-fit:cover;display:block}.portrait-fallback{color:#12261b;background:linear-gradient(135deg, hsl(var(--avatar-hue) 72% 68%), hsl(calc(var(--avatar-hue) + 32) 72% 54%));place-items:center;font-size:clamp(44px,6vw,84px);font-weight:800;display:grid}.code-chip{color:var(--gold-soft);letter-spacing:.5px;cursor:pointer;background:#f2c14e14;border:1px dashed #f2c14e6b;border-radius:999px;align-items:center;gap:6px;padding:4px 11px;font-size:12px;font-weight:600;transition:background .15s,transform .15s,border-color .15s;display:inline-flex}.code-chip:hover{background:#f2c14e2e;border-color:#f2c14ea6;transform:translateY(-1px)}.code-chip-sm{padding:3px 9px;font-size:11px}.code-label{text-transform:uppercase;letter-spacing:1px;color:var(--gold);opacity:.85;font-size:9.5px}.copied-icon{color:var(--green-live-soft)}.score-badge{color:#fff;background:linear-gradient(135deg,#e0522f,#b53a1f);border-radius:999px;flex-shrink:0;align-items:baseline;gap:4px;padding:6px 14px;font-size:13px;font-weight:700;display:inline-flex;box-shadow:0 6px 14px #e0522f52}.score-lg{padding:7px 16px;font-size:clamp(14px,1.3vw,19px)}.score-num{text-align:right;min-width:18px;font-size:15px}.score-unit{text-transform:uppercase;letter-spacing:.6px;opacity:.85;font-size:10.5px;font-weight:600}.leaderboard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex-direction:column;grid-column:3;min-height:0;display:flex;overflow:hidden}.is-searching .leaderboard{grid-column:1/-1}.list-panel-head{flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:clamp(12px,1.6vh,18px) 18px 0;display:flex}.list-panel-title{font-family:var(--font-display);color:var(--gold-soft);text-transform:uppercase;letter-spacing:1px;align-items:center;gap:8px;margin:0;font-size:clamp(16px,1.5vw,24px);font-weight:800;display:inline-flex}.list-panel-title svg{color:var(--gold)}.list-count{color:var(--text-muted);white-space:nowrap;font-size:12px}.list-toolbar{flex-shrink:0;align-items:center;gap:12px;padding:12px 18px 10px;display:flex}.search-wrap{flex:1;min-width:0;max-width:340px;position:relative}.search-wrap input{border:1px solid var(--border);width:100%;color:var(--text);background:#fdf8e912;border-radius:12px;outline:none;padding:10px 36px;font-family:inherit;font-size:13.5px;transition:border-color .15s,background .15s}.search-wrap input::placeholder{color:#a9bfaeb3}.search-wrap input:focus{background:#fdf8e91a;border-color:#f2c14e8c}.search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.clear-search{width:24px;height:24px;color:var(--text-muted);cursor:pointer;background:#fdf8e91f;border:none;border-radius:50%;font-size:12px;line-height:1;transition:background .15s,color .15s;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.clear-search:hover{color:var(--text);background:#fdf8e938}.list-wrap{flex:1;min-height:0;padding:2px 10px clamp(8px,1.4vh,14px);overflow-y:auto}.list-wrap::-webkit-scrollbar{width:8px}.list-wrap::-webkit-scrollbar-thumb{background:#f2c14e40;border-radius:999px}.list-wrap::-webkit-scrollbar-track{background:0 0}.list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.row{animation:.4s both rise;animation-delay:calc(var(--i) * 35ms);background:#fdf8e90a;border:1px solid #f2c14e1f;border-radius:13px;align-items:center;gap:12px;padding:clamp(9px,1vh,13px) 12px;transition:transform .18s,background .18s,border-color .18s;display:flex}.row:hover{background:#fdf8e917;border-color:#f2c14e57;transform:translateY(-2px)}.row.rank-1{background:linear-gradient(90deg,#f2c14e24,#f2c14e08 55%,#0000);border-color:#f2c14e66}.row.rank-2{background:linear-gradient(90deg,#b9c4cf1a,#b9c4cf05 55%,#0000)}.row.rank-3{background:linear-gradient(90deg,#d29a681a,#d29a6805 55%,#0000)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:translateY(16px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.row-rank{text-align:center;flex-shrink:0;width:34px}.row-rank .medal{font-size:21px;line-height:1;display:block}.rank-num{border:1px solid var(--border);width:30px;height:30px;color:var(--text-muted);background:#fdf8e914;border-radius:50%;place-items:center;margin:0 auto;font-size:13px;font-weight:700;display:grid}.row-main{flex-direction:column;gap:5px;min-width:0;display:flex}.row-name{color:var(--cream);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(13px,1.1vw,18px);font-weight:600;overflow:hidden}.row .score-badge{margin-left:auto}.empty-state{text-align:center;color:var(--text-muted);border:1px dashed var(--border);background:#fdf8e908;border-radius:14px;margin:8px 8px 0;padding:48px 20px}.empty-state svg{color:var(--gold);opacity:.7;margin-bottom:10px}.empty-state p{margin:0;font-size:13.5px}.simulate-btn{color:var(--green-live-soft);cursor:pointer;background:#3fae7f24;border:1px dashed #3fae7f73;border-radius:10px;align-items:center;gap:8px;margin:0 auto;padding:9px 16px;font-size:13px;font-weight:600;transition:background .15s,transform .15s;display:flex}.simulate-btn:hover{background:#3fae7f38;transform:translateY(-1px)}.skeleton{flex-direction:column;flex:1;gap:14px;min-height:0;display:flex}.skeleton-stats{border-radius:14px;flex-shrink:0;height:clamp(54px,7vh,76px)}.skeleton-rows{flex-direction:column;flex:1;gap:10px;display:flex}.skeleton-row{border-radius:14px;flex:1}.skeleton-stats,.skeleton-row{background:linear-gradient(90deg,#fdf8e90d,#fdf8e91c,#fdf8e90d) 0 0/200% 100%;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.toast{color:var(--cream);box-shadow:var(--shadow);z-index:50;text-align:center;background:#12261b;border:1px solid #f2c14e59;border-radius:999px;max-width:min(90vw,420px);padding:10px 18px;font-size:13.5px;font-weight:500;animation:.25s toast-in;position:fixed;bottom:26px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.footer{z-index:1;text-align:center;color:#a9bfae8c;flex-shrink:0;font-size:clamp(11px,.9vw,14px);position:relative}@media (width<=980px){.app{height:auto;overflow:visible}.app-content{height:auto;padding:20px 16px 16px}.stats,.dash-grid,.dash-grid.is-searching{grid-template-columns:1fr}.podium{grid-column:auto;grid-template-rows:auto;grid-template-columns:1fr}.podium-first-slot{grid-row:auto;min-height:320px}.podium-second,.podium-third{min-height:240px}.leaderboard,.is-searching .leaderboard{grid-column:auto;min-height:420px}.header-top{flex-direction:column}.brand-subtitle{font-size:13px}.row{gap:10px;padding:11px 12px}.row-name{font-size:13.5px}.row-rank{width:28px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
