:root{--sky:#eaf7ff;--sky2:#c9ecff;--blue:#0078ff;--blue2:#00b7ff;--deep:#061b3a;--text:#10213d;--muted:#51657f;--glass:rgba(255,255,255,.78);--line:rgba(40,120,200,.18);--shadow:0 22px 70px rgba(30,120,200,.16)}
*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--sky),#fff 48%,#f4fbff);min-height:100vh}
.hero{padding:64px 22px 42px;text-align:center;background:radial-gradient(ellipse at 15% 15%,rgba(255,255,255,.95),transparent 36%),radial-gradient(ellipse at 85% 8%,rgba(255,255,255,.8),transparent 32%),linear-gradient(140deg,#dff5ff,#bde8ff 58%,#f7fcff);border-bottom:1px solid var(--line)}
.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.18em;color:#006fe6}.hero h1{font-size:clamp(2.7rem,7vw,5.2rem);line-height:1;margin:14px 0;color:#071d42;letter-spacing:-.055em}.hero h1 span{color:var(--blue)}.hero>p{color:var(--muted);font-size:1.08rem;margin:0 auto 28px}
.totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:900px;margin:0 auto}.totals div{background:var(--glass);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:16px 10px;box-shadow:0 8px 28px rgba(30,120,200,.08);backdrop-filter:blur(12px)}.totals strong{display:block;font-size:clamp(1.35rem,3vw,2rem);color:var(--blue)}.totals span{font-size:.78rem;color:var(--muted)}
main{max-width:1200px;margin:auto;padding:38px 22px}.toolbar{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.toolbar h2,.rankings h2{font-size:1.8rem;color:#071d42;margin:0 0 5px}.toolbar p{color:var(--muted);margin:0}.toolbar input{width:min(300px,100%);padding:12px 15px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;outline-color:var(--blue)}
.players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.player-card{background:var(--glass);border:1px solid rgba(255,255,255,.95);border-radius:22px;padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:transform .18s,box-shadow .18s;min-width:0}.player-card:hover{transform:translateY(-4px);box-shadow:0 26px 65px rgba(30,120,200,.22)}.player-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.player-name{font-size:1.12rem;font-weight:800;overflow-wrap:anywhere}.rank{font-size:.76rem;font-weight:800;color:#006fe6;background:#e5f4ff;border-radius:999px;padding:6px 10px;white-space:nowrap}
.skin{height:170px;display:flex;align-items:center;justify-content:center;margin:12px 0 8px;background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(218,243,255,.25) 68%,transparent 70%);border-radius:16px}.skin img{height:158px;width:158px;object-fit:contain;image-rendering:pixelated}.avatar-fallback{width:74px;height:112px;position:relative;image-rendering:pixelated}.avatar-fallback:before{content:"";position:absolute;width:38px;height:38px;left:18px;top:0;background:#8cc8ef;border:5px solid #fff;box-shadow:0 2px 8px #8ab8d5}.avatar-fallback:after{content:"";position:absolute;left:9px;top:47px;width:56px;height:63px;background:linear-gradient(90deg,#0078ff 0 42%,#fff 42% 55%,#0078ff 55%);border:4px solid #fff;box-shadow:0 2px 8px #8ab8d5}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{background:rgba(0,120,255,.055);border-radius:12px;padding:10px 8px;min-width:0}.stat strong{display:block;color:#0078ff;font-size:1rem;overflow-wrap:anywhere}.stat span{font-size:.68rem;color:var(--muted)}
.card-foot{margin-top:12px;color:#006fe6;font-size:.8rem;font-weight:700}.profile{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;margin:0 0 24px;box-shadow:var(--shadow)}.profile[hidden]{display:none}.profile-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.profile-head .skin{width:150px;margin:0}.profile h2{margin:0;color:#071d42}.profile dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 0}.profile dl div{background:#f1f9ff;padding:12px;border-radius:12px}.profile dt{font-size:.75rem;color:var(--muted)}.profile dd{margin:4px 0 0;font-weight:800;color:#0078ff}
.rankings{margin-top:48px}.ranking-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}.ranking{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}.ranking h3{margin:0 0 12px;color:#0c244c}.ranking ol{padding-left:22px;margin:0}.ranking li{padding:5px 0;color:var(--muted);font-size:.9rem}.ranking b{color:var(--text)}footer{display:flex;justify-content:space-between;gap:15px;margin-top:55px;padding:20px 0;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.loading{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px}.error{background:#fff1f1;border:1px solid #ffd1d1;padding:18px;border-radius:14px;color:#8b2424}
@media(max-width:850px){.players{grid-template-columns:repeat(2,minmax(0,1fr))}.ranking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.hero{padding-top:45px}.totals{grid-template-columns:repeat(2,1fr)}main{padding:28px 14px}.toolbar{align-items:stretch;flex-direction:column}.toolbar input{width:100%}.players,.ranking-grid{grid-template-columns:1fr}.profile dl{grid-template-columns:repeat(2,minmax(0,1fr))}footer{flex-direction:column}}

/* Minecraft Skin Renderer */
.mc-skin{
  display:block;
  height:158px;
  width:auto;
  aspect-ratio:1/2;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* --- Supporter / Detailstatistik Preview --- */
.supporter-panel{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.supporter-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.supporter-head h3{margin:3px 0 4px;color:#071d42;font-size:1.35rem}.supporter-head p{margin:0;color:var(--muted)}
.supporter-badge{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#006fe6;background:#e5f4ff;border:1px solid var(--line);border-radius:999px;padding:7px 10px}
.supporter-locked{display:flex;flex-direction:column;gap:5px;padding:22px;border:1px dashed rgba(0,120,255,.3);border-radius:16px;background:rgba(234,247,255,.72);color:var(--muted)}
.supporter-locked strong{color:#071d42;font-size:1.05rem}.supporter-note{margin:12px 0 0;font-size:.78rem;line-height:1.55;color:var(--muted)}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-box{background:#f6fbff;border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}.detail-box h4{margin:0 0 10px;color:#0c244c}.detail-box ol{margin:0;padding-left:24px}.detail-box li{padding:4px 0;color:var(--muted)}.detail-box li span{display:inline-block;max-width:72%;overflow-wrap:anywhere;text-transform:capitalize}.detail-box li b{float:right;color:#0078ff}.advancements-box{margin-top:12px}.advancement-tags{display:flex;flex-wrap:wrap;gap:7px}.advancement-tags span{font-size:.75rem;color:#0c4e86;background:#e8f6ff;border:1px solid rgba(0,120,255,.12);border-radius:999px;padding:6px 9px;text-transform:capitalize}@media(max-width:720px){.detail-grid{grid-template-columns:1fr}.supporter-head{flex-direction:column}}


/* --- Hall of Shame --- */
.hall-of-shame{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:42px;
  padding:22px 24px;
  border:1px solid rgba(115,55,55,.16);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(249,243,243,.92));
  box-shadow:0 14px 42px rgba(70,35,35,.08)
}
.shame-icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  border-radius:18px;
  background:#20242b;
  color:#fff;
  font-size:2.25rem;
  line-height:1
}
.shame-copy{min-width:0}
.shame-copy h2{
  margin:3px 0 6px;
  color:#2d2020;
  font-size:1.55rem
}
.shame-copy p{
  margin:0 0 10px;
  color:var(--muted);
  line-height:1.5
}
.shame-copy strong{
  display:block;
  color:#8a2929;
  font-size:1.08rem
}
.shame-copy small{
  display:block;
  margin-top:5px;
  color:var(--muted)
}
@media(max-width:580px){
  .hall-of-shame{
    align-items:flex-start;
    padding:18px;
    gap:14px
  }
  .shame-icon{
    width:54px;
    height:54px;
    border-radius:14px;
    font-size:1.7rem
  }
}


/* --- Supporter Tier System --- */

.supporter-preview-grid,
.supporter-stats-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px
}

.supporter-preview-stat,
.supporter-stat{
  min-width:0;
  padding:12px 8px;
  border-radius:13px;
  background:#f2f9ff;
  border:1px solid rgba(0,120,255,.10);
  text-align:center
}

.supporter-preview-stat strong,
.supporter-stat strong{
  display:block;
  font-size:1rem;
  color:#0078ff;
  overflow-wrap:anywhere
}

.supporter-preview-stat span,
.supporter-stat span{
  display:block;
  margin-top:4px;
  font-size:.68rem;
  color:var(--muted)
}

.supporter-blur{
  filter:blur(4px);
  user-select:none
}

.supporter-lock-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  margin-top:15px
}

.supporter-lock-copy strong{
  color:#071d42;
  font-size:1.04rem
}

.supporter-link{
  display:inline-block;
  margin-top:7px;
  padding:9px 12px;
  border-radius:11px;
  background:#0078ff;
  color:#fff;
  text-decoration:none;
  font-size:.8rem;
  font-weight:800
}

.supporter-link:hover{
  background:#0068db
}

.supporter-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:.8rem
}

.supporter-detail-head strong{
  color:#087443;
  font-size:.95rem
}

.extended-tier{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:16px;
  padding:14px 16px;
  border-radius:15px;
  background:linear-gradient(135deg,#f7f8fb,#eef5fb);
  border:1px dashed rgba(30,70,110,.18)
}

.extended-tier div{
  display:flex;
  flex-direction:column;
  gap:4px
}

.extended-tier strong{
  color:#172b46
}

.extended-tier span:not(.coming-soon){
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45
}

.coming-soon{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:#e8edf3;
  color:#526477;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em
}

@media(max-width:850px){
  .supporter-preview-grid,
  .supporter-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:580px){
  .extended-tier{
    align-items:flex-start;
    flex-direction:column
  }

  .supporter-detail-head{
    align-items:flex-start;
    flex-direction:column
  }
}


/* --- Mein CONNDI / Supporter --- */

.hero{
  position:relative
}

.hof-account-link{
  position:absolute;
  top:20px;
  right:22px;
  z-index:5;

  padding:9px 13px;

  border-radius:999px;

  background:rgba(255,255,255,.92);
  color:#075dba;

  text-decoration:none;

  font-size:.78rem;
  font-weight:900;

  box-shadow:0 5px 20px rgba(10,50,90,.10);

  border:1px solid rgba(0,120,255,.12);

  backdrop-filter:blur(6px);

  transition:.15s ease
}

.hof-account-link:hover{
  transform:translateY(-1px)
}

@media(max-width:600px){

  .hof-account-link{
    position:static;
    display:inline-block;
    margin-bottom:16px
  }
}


/* --- Hall of Fame Navigation --- */

.hof-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 auto 22px;
  padding:0 150px 0 10px
}

.hof-nav a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,120,255,.12);
  color:#075dba;
  text-decoration:none;
  font-size:.75rem;
  font-weight:800;
  box-shadow:0 4px 14px rgba(10,50,90,.07)
}

.hof-nav a:hover{
  transform:translateY(-1px)
}

.hof-nav a[aria-current="page"]{
  background:#e9f5ff
}

.hof-footer-links a{
  color:inherit;
  text-decoration:none;
  font-weight:700
}

.hof-footer-links a:hover{
  text-decoration:underline
}

@media(max-width:700px){
  .hof-nav{
    padding:0;
    margin-bottom:15px
  }
}