/* classifica.css — pagina Classifica (usa token di hih.css; page-head da forum.css) */

/* tab periodo (riusa page-head di forum.css) */
.cls-tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:4px}
.cls-tab{font-family:var(--fontB);font-weight:800;font-size:13.5px;color:var(--muted);background:none;border:none;border-radius:10px;padding:9px 16px;cursor:pointer;transition:.14s}
.cls-tab:hover{color:var(--text)}
.cls-tab.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* selettore metrica */
.cls-metrics{display:flex;gap:12px;margin:4px 0 22px;flex-wrap:wrap}
.cls-metric{flex:1 1 180px;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 16px;border-radius:14px;background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-sm);cursor:pointer;font-family:var(--fontH);font-weight:600;font-size:15px;color:var(--muted);transition:.14s}
.cls-metric svg{opacity:.7}
.cls-metric:hover{color:var(--text);transform:translateY(-1px)}
.cls-metric.is-on{color:#fff;background:var(--accent);border-color:transparent}
.cls-metric.is-on svg{opacity:1}

/* layout */
.cls-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;padding-bottom:44px}
.cls-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.cls-side{display:flex;flex-direction:column;gap:20px}

/* podio */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px 12px 0;overflow:hidden;transition:transform .14s}
.pod::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--accent)}
.pod:hover{transform:translateY(-3px)}
.pod-first{padding-top:26px}
.pod-second,.pod-third{margin-bottom:0}
.pod-rank{position:absolute;top:12px;left:12px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-family:var(--fontH);font-weight:700;font-size:14px;color:#fff;background:var(--accent)}
.pod-crown{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:22px;color:#F4C04A;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.pod-av{width:96px;height:112px;display:grid;place-items:end center;overflow:hidden}
.pod-first .pod-av{width:118px;height:134px}
.pod-av img{width:100%;height:auto;transform:translateY(6px)}
.pod-name{font-family:var(--fontH);font-weight:600;font-size:16px;color:var(--text);margin-top:4px}
.pod-first .pod-name{font-size:18px}
.pod-badge img{width:26px;height:26px;image-rendering:pixelated;margin:4px 0}
.pod-score{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:2px}
.pod-score b{font-family:var(--fontH);font-weight:700;font-size:20px;color:var(--text)}
.pod-first .pod-score b{font-size:24px;color:var(--accent)}
.pod-score small{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.pod-stand{margin-top:14px;width:100%;border-radius:10px 10px 0 0;background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.pod-second .pod-stand{height:30px}
.pod-first .pod-stand{height:54px}
.pod-third .pod-stand{height:18px}

/* tabella */
.cls-unit{margin-left:auto;font-size:12px;font-weight:700;color:var(--faint)}
.cls-table{list-style:none;margin:0;padding:4px 8px 10px}
.cls-thead,.cls-row{display:grid;grid-template-columns:54px minmax(0,1fr) 80px 90px 110px;align-items:center;gap:10px}
.cls-thead{padding:8px 10px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);border-bottom:1px solid var(--line)}
.cls-row{padding:9px 10px;border-radius:12px;transition:background .14s}
.cls-row+.cls-row{border-top:1px solid var(--line)}
.cls-row:hover{background:var(--surface-2)}
.cls-row.is-me{background:color-mix(in srgb,var(--r6) 10%,var(--surface));outline:1.5px solid color-mix(in srgb,var(--r6) 30%,transparent)}
.cls-c-rank{display:flex;align-items:center;gap:6px;font-family:var(--fontH);font-weight:600;font-size:15px;color:var(--muted)}
.cls-c-user{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.cls-c-user img:first-child{width:34px;height:34px;border-radius:10px;background:var(--surface-2);flex:0 0 auto;object-fit:cover;object-position:center -2px}
.cls-c-user b{font-family:var(--fontB);font-weight:800;font-size:14.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cls-umedal{width:22px;height:22px;image-rendering:pixelated;flex:0 0 auto}
.cls-c-wins,.cls-c-badges{font-family:var(--fontB);font-weight:700;font-size:14px;color:var(--muted);text-align:center}
.cls-c-score{text-align:right;font-family:var(--fontB);color:var(--text)}
.cls-c-score b{font-family:var(--fontH);font-weight:600;font-size:16px}
.cls-c-score small{font-size:11px;color:var(--faint);font-weight:700}
.trend{font-size:9px;font-weight:800}
.trend-up{color:var(--r4)}
.trend-down{color:var(--r1)}
.trend-same{color:var(--faint)}

/* la tua posizione */
.cls-me{display:flex;align-items:center;gap:12px;padding:0 16px}
.cls-me-rank{font-family:var(--fontH);font-weight:700;font-size:22px;color:var(--r6);flex:0 0 auto}
.cls-me-av{width:46px;height:46px;border-radius:12px;background:var(--surface-2);object-fit:cover;object-position:center -3px;flex:0 0 auto}
.cls-me-id{min-width:0}
.cls-me-id b{font-family:var(--fontH);font-weight:600;font-size:16px;color:var(--text)}
.cls-me-id small{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.cls-me-bar{height:8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);margin:14px 16px 0;overflow:hidden}
.cls-me-bar span{display:block;height:100%;border-radius:5px;background:var(--spectrum)}
.cls-me-hint{margin:10px 16px 16px;font-size:12.5px;font-weight:700;color:var(--muted)}
.cls-me-hint b{color:var(--text)}

/* come guadagnare punti */
.cls-how{list-style:none;margin:0;padding:4px 16px 16px;display:flex;flex-direction:column;gap:11px}
.cls-how li{display:flex;align-items:center;gap:12px}
.cls-how-ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.cls-how b{display:block;font-family:var(--fontB);font-weight:800;font-size:13.5px;color:var(--text)}
.cls-how small{font-size:12px;font-weight:700;color:var(--muted)}

/* mobile */
.hih[data-mobile="true"] .cls-grid{grid-template-columns:1fr}
.hih[data-mobile="true"] .cls-metric{flex-basis:100%}
.hih[data-mobile="true"] .cls-thead,.hih[data-mobile="true"] .cls-row{grid-template-columns:40px minmax(0,1fr) 84px}
.hih[data-mobile="true"] .cls-c-wins,.hih[data-mobile="true"] .cls-c-badges{display:none}
.hih[data-mobile="true"] .pod-av{width:72px;height:84px}
.hih[data-mobile="true"] .pod-first .pod-av{width:84px;height:96px}
.hih[data-mobile="true"] .pod-name{font-size:13px}
.hih[data-mobile="true"] .pod-first .pod-name{font-size:14px}