/* GOAL 93c — Rangliste (Podest, Top 10, volle Tabelle, XP-Erklärung). Baut auf site.css-Variablen auf. */
:root{--gold:oklch(82% .14 86);--silver:oklch(86% .012 250);--bronze:oklch(68% .1 55);--lb-bg:oklch(19% .03 145);--lb-card:oklch(24% .035 145);--lb-line:oklch(96% .02 84/.14)}
.lb{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(120% 90% at 78% 0%,oklch(33% .07 142/.75),transparent 62%),linear-gradient(180deg,var(--lb-bg),oklch(15% .026 145));color:var(--cream);padding:6.25rem clamp(1rem,4vw,4.5rem) 3rem}
.lb::before{content:"";position:absolute;z-index:-1;right:-6rem;top:3.5rem;width:22rem;height:22rem;border-radius:50%;background:var(--ember);opacity:.12}
.lb-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(1.25rem,3vw,2.25rem)}
.lb-head h1,.lb-head h2{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:clamp(2.4rem,5vw,4.1rem);font-weight:700;line-height:.92;letter-spacing:.005em;text-transform:uppercase}
.lb-head p{margin:.6rem 0 0;max-width:34rem;color:oklch(92% .02 84/.78);font-size:.95rem;line-height:1.5}.lb-full .podium{max-width:44rem;margin-inline:auto}
.lb-live{display:inline-flex;align-items:center;gap:.5rem;font-family:"Barlow Condensed",sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:oklch(88% .03 84/.8)}
.lb-live i{width:.55rem;height:.55rem;border-radius:50%;background:oklch(72% .05 100);transition:background-color 200ms}
.lb[data-state="live"] .lb-live i{background:oklch(78% .17 150);box-shadow:0 0 0 .25rem oklch(78% .17 150/.18)}
.lb[data-state="offline"] .lb-live i{background:var(--ember)}
.lb-grid{display:grid;gap:clamp(1.25rem,3vw,3rem);align-items:start}.lb-left{display:grid;gap:1.25rem;min-width:0}.lb-left .lb-head{margin:0}
@media (min-width:64rem){.lb-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}

/* Podest: Platz 2 · 1 · 3, Platz 1 am höchsten */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:.5rem;margin:0;padding:0;list-style:none;min-height:15.5rem}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.15rem;padding:.9rem .5rem 0;border:1px solid var(--lb-line);border-bottom:0;border-radius:.9rem .9rem 0 0;background:linear-gradient(180deg,oklch(30% .045 145/.85),oklch(24% .035 145));text-align:center;min-width:0;transition:transform 220ms var(--ease)}
.pod::after{content:"";display:block;width:100%;margin-top:.8rem;border-top:3px solid var(--pc);background:linear-gradient(180deg,oklch(100% 0 0/.08),transparent)}
.pod-1{--pc:var(--gold);order:2;min-height:15.5rem}.pod-2{--pc:var(--silver);order:1;min-height:13rem}.pod-3{--pc:var(--bronze);order:3;min-height:11rem}
.pod::after{height:var(--base,2.5rem)}.pod-1{--base:4.2rem}.pod-2{--base:3.2rem}.pod-3{--base:2.4rem}
.pod-medal{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;border:2px solid var(--pc);color:var(--pc);font-family:"Barlow Condensed",sans-serif;font-size:1.55rem;font-weight:700;line-height:1;background:oklch(16% .03 145/.7)}
.pod-1 .pod-medal{width:3.4rem;height:3.4rem;font-size:2rem;box-shadow:0 0 0 .3rem oklch(82% .14 86/.14)}
.pod-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.45rem;font-family:"Barlow Condensed",sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.pod-1 .pod-name{font-size:1.65rem}
.pod-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Consolas,monospace;font-size:.72rem;letter-spacing:.04em;color:oklch(88% .03 84/.62)}
.pod-meta{font-family:"Barlow Condensed",sans-serif;font-size:1rem;font-weight:500;letter-spacing:.05em;color:var(--pc)}
.pod.is-empty{opacity:.45}.pod.is-empty .pod-name{font-size:1rem}
.pod.is-me{box-shadow:0 0 0 2px var(--ember)}

/* Top 10 / Tabelle */
.lb-list{margin:0;padding:0;list-style:none;border:1px solid var(--lb-line);border-radius:.9rem;overflow:hidden;background:oklch(22% .033 145/.7)}
.lb-row{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;align-items:center;gap:.25rem .75rem;min-height:2.75rem;padding:.3rem .9rem;border-top:1px solid var(--lb-line);font-variant-numeric:tabular-nums}
.lb-row:first-child{border-top:0}
.lb-rank{font-family:"Barlow Condensed",sans-serif;font-size:1.3rem;font-weight:700;color:oklch(88% .06 80)}
.lb-row:nth-child(-n+3) .lb-rank{color:var(--ember)}
.lb-who{min-width:0}.lb-who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.lb-who small{display:block;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Consolas,monospace;font-size:.7rem;color:oklch(88% .03 84/.58)}
.lb-score{text-align:right;font-family:"Barlow Condensed",sans-serif;font-size:1.05rem;font-weight:500;letter-spacing:.04em;white-space:nowrap}.lb-score small{display:inline-block;margin-left:.5rem;font-size:.85rem;opacity:.65}
.lb-row.is-me{background:oklch(68% .135 52/.18);box-shadow:inset 3px 0 var(--ember)}
.lb-row.is-flash{animation:lbflash 1.6s var(--ease)}@keyframes lbflash{from{background:oklch(78% .15 78/.5)}}
.lb-note{margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between}
.lb-note .text-link{color:var(--cream)}
.lb-status{margin:0;padding:1.4rem 1rem;text-align:center;color:oklch(90% .02 84/.8)}
.lb-status button{margin-left:.5rem}
.lb-skel{height:3.1rem;border-top:1px solid var(--lb-line);background:linear-gradient(90deg,transparent,oklch(100% 0 0/.05),transparent) 0 0/200% 100%;animation:lbskel 1.4s linear infinite}@keyframes lbskel{to{background-position:-200% 0}}

/* Controls (volle Seite) */
.lb-tools{display:grid;gap:.75rem;margin:0 0 1.25rem}
.lb-tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.lb-tabs button,.lb-btn{min-height:2.75rem;padding:.4rem 1rem;border:1px solid var(--lb-line);border-radius:99rem;background:oklch(24% .035 145/.8);color:var(--cream);font-family:"Barlow Condensed",sans-serif;font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color 160ms,transform 160ms var(--ease)}
.lb-tabs button[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:oklch(20% .035 47)}
.lb-btn:hover:not(:disabled),.lb-tabs button:hover{background:oklch(32% .05 145)}.lb-btn:active:not(:disabled),.lb-tabs button:active{transform:scale(.97)}
.lb-btn:disabled{opacity:.4;cursor:default}
.lb-btn.is-primary{background:var(--cream);color:var(--ink-deep);border-color:var(--cream)}
.lb-find{display:flex;flex-wrap:wrap;gap:.5rem}
.lb-find label{display:flex;flex:1 1 14rem;flex-direction:column;gap:.2rem;font-family:"Barlow Condensed",sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:oklch(88% .04 84/.75)}
.lb-find select{min-width:5rem}.lb-find input,.lb-find select{width:100%;min-height:2.75rem;padding:.4rem .8rem;border:1px solid var(--lb-line);border-radius:.6rem;background:oklch(16% .028 145);color:var(--cream);font:inherit;font-size:1rem}
.lb-find input:focus-visible,.lb-find select:focus-visible{outline:3px solid oklch(78% .15 78);outline-offset:2px}
.lb-find .lb-actions{display:flex;flex-wrap:wrap;align-items:end;gap:.5rem}
.lb-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-top:1rem}
.lb-pager .lb-pages{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.lb-pager output{font-family:"Barlow Condensed",sans-serif;font-size:1.05rem;letter-spacing:.06em}
.lb-goto{display:flex;align-items:center;gap:.4rem}.lb-goto input{width:6.5rem;min-height:2.75rem;padding:.4rem .6rem;border:1px solid var(--lb-line);border-radius:.6rem;background:oklch(16% .028 145);color:var(--cream);font:inherit}
.lb-me-form[hidden]{display:none}
.lb-me-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;padding:.8rem;border:1px dashed var(--lb-line);border-radius:.7rem}
.lb-me-form p{flex:1 1 100%;margin:0;font-size:.9rem;color:oklch(90% .02 84/.8)}
.lb-me-form input{flex:1 1 12rem;min-height:2.75rem;padding:.4rem .8rem;border:1px solid var(--lb-line);border-radius:.6rem;background:oklch(16% .028 145);color:var(--cream);font:inherit}
.lb-full .lb-row{grid-template-columns:4.5rem minmax(0,1fr) auto}
.lb-full .lb-stats{display:none}
@media (min-width:48rem){.lb-full .lb-row{grid-template-columns:5rem minmax(0,1.6fr) minmax(0,1fr) auto}.lb-full .lb-stats{display:block;font-size:.9rem;color:oklch(90% .02 84/.72);font-variant-numeric:tabular-nums}}

/* XP-Erklärung */
.xp{padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,4.5rem);background:var(--paper);color:var(--ink)}
.xp-grid{display:grid;gap:clamp(1.25rem,2.5vw,2.5rem);margin-top:2rem}
@media (min-width:64rem){.xp-grid{grid-template-columns:1.05fr 1fr 1fr}}
.xp h2{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700;line-height:.95;text-transform:uppercase}
.xp h3{margin:0 0 .6rem;font-family:"Barlow Condensed",sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--moss-dark)}
.xp-card{padding:1.25rem 1.35rem;border:1px solid var(--line);border-radius:1rem;background:var(--cream)}
.xp-card ul{margin:0;padding-left:1.1rem}.xp-card li{margin:.35rem 0}
.xp-demo{display:grid;gap:.6rem}
.xp-demo-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase}
.xp-demo-top b{font-size:1.5rem}.xp-demo-top span{font-family:ui-monospace,Consolas,monospace;font-size:.75rem;opacity:.6;text-transform:none}
.xp-bar{height:.9rem;border-radius:99rem;background:oklch(88% .04 80);overflow:hidden}.xp-bar i{display:block;height:100%;width:62%;border-radius:inherit;background:linear-gradient(90deg,var(--moss),var(--ember))}
.xp-demo p{margin:0}
.xp-tiers{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.xp-tiers th,.xp-tiers td{padding:.35rem .4rem;border-bottom:1px solid var(--line);text-align:left}.xp-tiers th{font-family:"Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
.xp-fine{margin:.8rem 0 0;font-size:.88rem;color:oklch(40% .03 100)}
.lb-nav-link{display:inline-block}
@media (max-width:31rem){.lb-full .lb-rank{font-size:1.15rem}.lb{padding-top:5.2rem}.podium{gap:.3rem}.pod{padding:.7rem .25rem 0}.pod-name{font-size:1.05rem}.pod-1 .pod-name{font-size:1.2rem}.pod-medal{width:2.2rem;height:2.2rem;font-size:1.3rem}.pod-1 .pod-medal{width:2.7rem;height:2.7rem;font-size:1.6rem}.pod-tag{display:none}.pod-meta{font-size:.9rem}.lb-row{padding:.35rem .6rem;grid-template-columns:2.6rem minmax(0,1fr) auto}}
@media (prefers-reduced-motion:reduce){.pod,.lb-row.is-flash,.lb-skel,.lb-btn,.lb-tabs button{animation:none;transition:none}}
.standalone-header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,4.5rem);color:var(--cream);border-bottom:1px solid oklch(95% .02 80/.2)}
.standalone-header .language{display:flex}
.lb-tools.is-spaced{margin-top:1.75rem}.lb-results{padding:0;text-align:left}.lb-msg{flex:1 1 100%;margin:0;font-size:.9rem;color:var(--ember)}.lb-find label.fit{flex:0 0 auto}
.pod-meta span{display:block;line-height:1.2}
.lb-head>div{flex:1 1 30rem;min-width:0}
.lb-head h1{max-width:none;line-height:.92;letter-spacing:.005em}
