.rankings-page{background:var(--bg-base);-webkit-overflow-scrolling:touch;height:100dvh;max-height:100dvh;font-family:var(--font-prompt), var(--font-noto-sans-thai), var(--font-outfit), "Prompt", "Noto Sans Thai", sans-serif;overflow-x:hidden;overflow-y:auto!important}.rankings-hero{text-align:center;background:linear-gradient(135deg,#1a1520 0%,#0f0d15 50%,#1a1018 100%);padding:70px 24px;position:relative;overflow:hidden}.rankings-hero:before{content:"";pointer-events:none;background:radial-gradient(600px 400px at 30% 20%,#ffa8001f,#0000),radial-gradient(500px 350px at 70% 80%,#8b5cf614,#0000),radial-gradient(300px 300px,#ffa8000d,#0000);position:absolute;inset:0}.rankings-hero:after{content:"";background:linear-gradient(to top, var(--bg-base), transparent);pointer-events:none;height:80px;position:absolute;bottom:0;left:0;right:0}.hero-trophy{filter:drop-shadow(0 4px 20px #ffa80066);margin-bottom:12px;font-size:56px;animation:2s ease-in-out infinite trophy-bounce;display:block}@keyframes trophy-bounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-8px)scale(1.05)}}.hero-title{letter-spacing:-.5px;background:linear-gradient(135deg,#ffa800,gold,#ff8c00);-webkit-text-fill-color:transparent;z-index:1;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-family:Prompt,Outfit,sans-serif;font-size:36px;font-weight:800;position:relative}.hero-subtitle{color:#ffffff80;z-index:1;font-size:15px;font-weight:400;position:relative}.rankings-back-btn{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-default);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);background:#ffffffe6;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;text-decoration:none;display:flex;position:fixed;top:20px;left:20px;box-shadow:0 2px 12px #0000000f}.rankings-back-btn:hover{background:#fff;transform:translate(-2px);box-shadow:0 4px 20px #0000001a}.rankings-controls{z-index:10;max-width:900px;margin:-30px auto 0;padding:0 20px;position:relative}.controls-card{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-subtle);padding:24px}.controls-row{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.control-group{flex:1;min-width:140px}.control-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:5px;margin-bottom:6px;font-size:11px;font-weight:700;display:flex}.control-select{border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--bg-elevated);width:100%;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238e92a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding:10px 32px 10px 14px;font-family:Prompt,Outfit,Noto Sans Thai,sans-serif;font-size:13px;font-weight:500}.control-select:hover{border-color:var(--accent-primary)}.control-select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.score-toggle{background:var(--bg-elevated);border-radius:14px;gap:3px;margin-top:16px;padding:3px;display:flex}.score-tab{cursor:pointer;transition:all var(--transition-fast);color:var(--text-muted);background:0 0;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-family:Prompt,Outfit,Noto Sans Thai,sans-serif;font-size:13px;font-weight:600;display:flex}.score-tab.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:0 2px 8px #0000000f}.score-tab:hover:not(.active){color:var(--text-secondary)}.score-tab-icon{font-size:16px}.podium-section{max-width:900px;margin:32px auto 0;padding:0 20px}.podium-row{justify-content:center;align-items:flex-end;gap:12px;margin-bottom:32px;display:flex}.podium-card{border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:all var(--transition-base);border:1px solid #0000;padding:24px 16px 20px;position:relative;overflow:hidden}.podium-card:hover{transform:translateY(-4px)}.podium-card.rank-1{background:linear-gradient(145deg,#fffef5 0%,#fff8e1 50%,#fff3cd 100%);border-color:#ffa80040;flex:1.1;order:2;min-height:240px;box-shadow:0 4px 24px #ffa80026,0 0 0 1px #ffa80014}.podium-card.rank-1:hover{box-shadow:0 8px 40px #ffa80040,0 0 0 1px #ffa80026}.podium-card.rank-1 .podium-glow{pointer-events:none;background:radial-gradient(circle,#ffa8001f,#0000 70%);width:200px;height:200px;position:absolute;top:-20px;left:50%;transform:translate(-50%)}.podium-card.rank-2{background:linear-gradient(145deg,#f8f8fa 0%,#f0f1f5 50%,#e8eaf0 100%);border-color:#94a3b840;flex:.95;order:1;min-height:210px;box-shadow:0 4px 16px #0000000f}.podium-card.rank-2:hover{box-shadow:0 8px 32px #0000001a}.podium-card.rank-3{background:linear-gradient(145deg,#fdf7f0 0%,#f5ece2 50%,#eeddd0 100%);border-color:#cd7f3233;flex:.9;order:3;min-height:190px;box-shadow:0 4px 16px #cd7f3214}.podium-card.rank-3:hover{box-shadow:0 8px 32px #cd7f3226}.podium-medal{filter:drop-shadow(0 2px 6px #0000001f);margin-bottom:8px;font-size:40px;display:block}.podium-rank-num{color:var(--text-muted);opacity:.5;font-size:12px;font-weight:800;position:absolute;top:8px;right:12px}.podium-name{color:var(--text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:4px;font-size:14px;font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.podium-meta{color:var(--text-muted);justify-content:center;align-items:center;gap:4px;margin-bottom:8px;font-size:11px;display:flex}.podium-score{color:var(--accent-primary);font-size:22px;font-weight:800}.podium-score-label{color:var(--text-muted);margin-top:2px;font-size:11px;font-weight:500}.podium-category-tag{color:var(--text-secondary);background:#0000000a;border-radius:6px;align-items:center;gap:3px;margin-top:6px;padding:3px 8px;font-size:10px;font-weight:600;display:inline-flex}.rankings-list-section{max-width:900px;margin:0 auto;padding:0 20px 60px}.rankings-list-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.rankings-list-title{color:var(--text-primary);align-items:center;gap:6px;font-size:15px;font-weight:700;display:flex}.rankings-count{color:var(--text-muted);background:var(--bg-elevated);border-radius:12px;padding:3px 10px;font-size:12px;font-weight:500}.rankings-list{flex-direction:column;gap:8px;display:flex}.rank-card{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);transition:all var(--transition-fast);cursor:pointer;align-items:center;gap:14px;padding:14px 16px;display:flex;position:relative;overflow:hidden}.rank-card:hover{border-color:var(--border-default);box-shadow:var(--shadow-sm);transform:translate(4px)}.rank-card:before{content:"";background:var(--rank-accent,var(--accent-primary));opacity:0;width:3px;transition:opacity var(--transition-fast);border-radius:3px 0 0 3px;position:absolute;top:0;bottom:0;left:0}.rank-card:hover:before{opacity:1}.rank-position{background:var(--bg-elevated);width:36px;height:36px;color:var(--text-secondary);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:800;display:flex}.rank-position.top-10{color:var(--accent-primary);background:linear-gradient(135deg,#ffa80014,#ffa8000a)}.rank-info{flex:1;min-width:0}.rank-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:700;overflow:hidden}.rank-details{color:var(--text-muted);align-items:center;gap:8px;margin-top:3px;font-size:11.5px;display:flex}.rank-detail-dot{background:var(--text-muted);opacity:.4;border-radius:50%;width:3px;height:3px}.rank-scores{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:2px;display:flex}.rank-main-score{align-items:center;gap:4px;font-size:16px;font-weight:800;display:flex}.rank-main-score.google{color:#4285f4}.rank-main-score.gg{color:var(--accent-primary)}.rank-sub-score{color:var(--text-muted);font-size:10.5px;font-weight:500}.rankings-empty{text-align:center;color:var(--text-muted);padding:60px 20px}.rankings-empty-emoji{margin-bottom:12px;font-size:48px;display:block}.rankings-empty-text{color:var(--text-secondary);margin-bottom:4px;font-size:15px;font-weight:600}.rankings-empty-sub{color:var(--text-muted);font-size:13px}.stats-bar{-webkit-backdrop-filter:blur(12px);z-index:10;background:#120d18bf;border:1px solid #ffa80040;border-radius:20px;justify-content:center;align-items:center;gap:32px;margin-top:20px;padding:10px 28px;display:inline-flex;position:relative;box-shadow:0 8px 24px #0000004d}.stat-box{text-align:center}.stat-box-value{color:#ffa800;font-size:22px;font-weight:800;line-height:1}.stat-box-label{color:#fff;margin-top:4px;font-size:11.5px;font-weight:600}@keyframes rank-slide-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.rank-card{animation:.4s ease-out both rank-slide-in}.rank-card:first-child{animation-delay:50ms}.rank-card:nth-child(2){animation-delay:.1s}.rank-card:nth-child(3){animation-delay:.15s}.rank-card:nth-child(4){animation-delay:.2s}.rank-card:nth-child(5){animation-delay:.25s}.rank-card:nth-child(6){animation-delay:.3s}.rank-card:nth-child(7){animation-delay:.35s}.rank-card:nth-child(8){animation-delay:.4s}.rank-card:nth-child(9){animation-delay:.45s}.rank-card:nth-child(10){animation-delay:.5s}.podium-card{animation:.5s ease-out both rank-slide-in}.podium-card.rank-2{animation-delay:.1s}.podium-card.rank-1{animation-delay:.2s}.podium-card.rank-3{animation-delay:.3s}@media (max-width:640px){.rankings-hero{padding:70px 16px 50px}.hero-trophy{font-size:44px}.hero-title{font-size:26px}.hero-subtitle{font-size:13px}.rankings-controls{margin-top:-24px;padding:0 12px}.controls-card{padding:16px}.controls-row{gap:8px}.control-group{min-width:100%}.score-toggle{margin-top:12px}.score-tab{padding:8px 10px;font-size:12px}.podium-section{padding:0 12px}.podium-row{gap:6px}.podium-card{padding:16px 10px 14px}.podium-card.rank-1{min-height:200px}.podium-card.rank-2{min-height:175px}.podium-card.rank-3{min-height:160px}.podium-medal{font-size:30px}.podium-name{font-size:12px}.podium-score{font-size:18px}.rankings-list-section{padding:0 12px 40px}.rank-card{gap:10px;padding:12px}.rank-name{font-size:12.5px}.rank-details{font-size:10.5px}.stats-bar{gap:20px}.stat-box-value{font-size:20px}.rankings-back-btn{padding:6px 12px;font-size:12px;top:12px;left:12px}}