/* Beyond Kalonline — shared ranking theme (drop-in for all ranking pages) */
:root{--void:#050310;--void-2:#0a0718;--abyss:#120d22;--violet:#e3b341;--violet-light:#f0cd72;--violet-bright:#f7e3b0;--violet-deep:#8a6a1e;--gold:#e3b341;--emerald:#5ec9a0;--text:#e6e6fa;--text-2:#c8c4e2;--text-3:#9c96bd;--text-mute:#8a85b0;--border:#3a2e1f;--border-bright:#5a4728}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:linear-gradient(160deg,var(--void),var(--void-2) 50%,var(--abyss));font-family:'Inter','Open Sans',sans-serif;color:var(--text-2);min-height:100vh}
.hero{position:relative;padding:36px 20px 28px;text-align:center;overflow:hidden}
/* 01.09.2026: Der Schein ist hier ganz raus. Er sass mit seinem
   hellsten Punkt genau auf der Oberkante - direkt unter dem Kopf -
   und traf dort auf den Schleier des Kopfes. Zwei Verlaeufe, die auf
   derselben Hoehe enden, ergeben eine Stufe, egal wie weich jeder
   einzelne ist. Die Stimmung fuer den Seitenanfang kommt jetzt
   ausschliesslich aus bk_shell.php und laeuft von y=0 durch. Die
   Huelle bleibt stehen, damit die Regel nicht aus dem Blatt faellt,
   falls hier spaeter wieder etwas hin soll. */
.hero-bg{position:absolute;inset:0;background:none;z-index:0}
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
/* 01.09.2026: top war -100px. Der Abschnitt schneidet oben ab
   (overflow:hidden), und bei -100 lag die Schnittkante mitten im
   sichtbaren Teil des Scheins - das ergab links und rechts je eine
   harte waagerechte Kante direkt unter dem Kopf. Bei -30 liegt die
   Kante ausserhalb des Verlaufs (Abstand 0,8 der Achse, der Verlauf
   endet bei 0,7), es wird also nur Durchsichtiges abgeschnitten. */
.glow-l{width:300px;height:300px;top:-30px;left:-60px;background:radial-gradient(circle,rgba(227,179,65,.18) 0%,transparent 70%)}
.glow-r{width:300px;height:300px;top:-30px;right:-60px;background:radial-gradient(circle,rgba(74,78,143,.14) 0%,transparent 70%)}
.glow-c{width:400px;height:200px;top:0;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(240,205,114,.10) 0%,transparent 70%)}
.hero-content{position:relative;z-index:1}
/* Fluessig statt fest: bei 390 px brach "Hall of Fame" mit 32 px
   und 5 px Sperrung auf zwei Zeilen um. Und in Gold wie die
   Wortmarke - ein weisser Titel unter goldenem Kopf sah aus wie
   von einer anderen Seite. Der Schein liegt als drop-shadow an,
   text-shadow greift bei beschnittenem Verlauf nicht. */
.hero-title{font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:clamp(23px,6.6vw,32px);font-weight:900;
  letter-spacing:clamp(1.5px,.9vw,5px);text-transform:uppercase;margin-bottom:8px;
  /* Erster Halt schon in Gold, nicht in Creme: bei 32 px nimmt
     der obere Teil so viel Flaeche ein, dass ein heller Anfang
     die ganze Zeile weiss wirken laesst. */
  background:linear-gradient(180deg,#f5dfa4 0%,#e8bc55 34%,#c9982f 72%,#8a6a1e 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(227,179,65,.38))}
.hero-sub{font-size:clamp(9.5px,2.6vw,11px);letter-spacing:clamp(2px,1vw,4px)}
.hero-line{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--violet-light),transparent);margin:10px auto}
.hero-sub{font-size:11px;color:var(--text-3);letter-spacing:4px;text-transform:uppercase}
.class-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px;max-width:980px;margin:0 auto}
.cc{border:1px solid var(--border);border-radius:12px;padding:16px 12px;text-align:center;overflow:hidden;transition:transform .2s,border-color .2s;background:rgba(31,18,56,.4)}
.cc:hover{transform:translateY(-2px);border-color:var(--violet-light)}
.cc img{width:64px;height:64px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 0 10px rgba(240,205,114,.35))}
.cc-label{font-family:'Cinzel',serif;font-size:8px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;color:var(--violet-bright)}
.cc-name{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px}
.cc-lvl{font-size:11px;color:var(--text-3);margin-bottom:8px}
.cc-job-badge{font-size:10px;font-weight:600;padding:3px 10px;border-radius:6px;display:inline-block;margin-bottom:10px}
.cc-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.cc-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--violet-deep),var(--violet-light))}
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:16px 16px 12px;max-width:980px;margin:0 auto}
.fb{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--text-3);padding:7px 16px;border-radius:5px;cursor:pointer;transition:.18s}
.fb.on,.fb:hover{background:rgba(227,179,65,.18);border-color:var(--violet-light);color:#fff}
.search-wrap{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:10px;font-size:13px;color:var(--text-mute)}
.search-wrap input{background:rgba(6,3,15,.6);border:1px solid var(--border);color:var(--text);font-size:13px;padding:7px 12px 7px 32px;border-radius:5px;outline:none;width:200px;font-family:inherit}
.search-wrap input:focus{border-color:var(--violet-light);box-shadow:0 0 0 3px rgba(227,179,65,.2)}
.table-wrap{padding:0 16px 24px;max-width:980px;margin:0 auto}
.t-head{display:grid;grid-template-columns:56px 1fr 60px 120px 180px 120px;padding:8px 12px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-mute);border-bottom:1px solid var(--border-bright)}
.rk-row{display:grid;grid-template-columns:56px 1fr 60px 120px 180px 120px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);transition:background .15s;border-radius:6px;margin-bottom:4px;background:rgba(31,18,56,.35)}
.rk-row:hover{background:rgba(227,179,65,.10)}
.rk-row.r1{background:rgba(227,179,65,.08);border:1px solid #8a6a2c}
.rk-row.r2{background:rgba(148,163,184,.08);border:1px solid #7a7a85}
.rk-row.r3{background:rgba(94,201,160,.08);border:1px solid #2f6b4f}
.col-rank{font-family:'Cinzel',serif;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.rn{font-size:13px;color:var(--text-mute)}
.r1 .col-rank{font-size:22px;color:var(--gold)}
.r2 .col-rank{color:#c8c4e2}.r3 .col-rank{color:#8fdcc0}
.col-name{font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:6px}
.col-lvl,.col-geon,.col-egg,.col-honor,.col-kills,.col-money,.col-value{font-size:14px;color:var(--violet-bright);text-align:center;font-family:'JetBrains Mono',monospace}
.col-job{display:flex;align-items:center}
.job-badge{font-size:10px;font-weight:600;padding:3px 10px;border-radius:6px}
.col-progress{display:flex;align-items:center;gap:8px}
.col-kd{font-size:14px;font-weight:700;text-align:center;font-family:'Cinzel',serif;letter-spacing:1px}
.kd-good{color:#8fdcc0}.kd-ok{color:var(--gold)}.kd-bad{color:#e5707e}
.bar,.progress-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;flex:1}
.bar-fill,.progress-fill{height:100%;background:linear-gradient(90deg,var(--violet-deep),var(--violet-light))}
a{color:var(--violet-light);text-decoration:none}a:hover{color:var(--violet-bright)}
@media(max-width:760px){.class-cards{grid-template-columns:repeat(2,1fr)}.t-head,.rk-row{grid-template-columns:44px 1fr 70px 90px}.t-head span:nth-child(4),.t-head span:nth-child(5),.rk-row .col-job,.rk-row .col-progress{display:none}}

/* ---------- Rangschilder (gemeinsam) ----------
   01.09.2026. Stand zuerst nur inline in ranking/index.php; die
   Kill-Rangliste hatte weiter die Medaillen-Bildzeichen und sah
   dadurch aus wie von einer anderen Seite. Jetzt hier, damit beide
   Listen dieselben Schilder tragen.

   ⚠ ranking/ranking.php traegt eine INLINE-KOPIE dieser Datei (damit
   ein 404 die Seite nicht zerlegt). Die Stufenrangliste zieht ihre
   Schilder weiterhin aus ihrem eigenen Stilblock in
   ranking/index.php - die Regeln sind gleich, es gibt also keinen
   Streit. Wer hier etwas aendert, sieht bitte dort nach. */
.col-rank{overflow:visible !important}
.rkb{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;box-sizing:border-box;
  font-family:'Cinzel',serif;font-weight:700;font-size:14px;line-height:1;letter-spacing:0;
  background:rgba(0,0,0,.42);border:1px solid rgba(227,179,65,.18);color:#8d86ad;
  transition:border-color .22s cubic-bezier(.22,1,.36,1),color .22s cubic-bezier(.22,1,.36,1)}
.rkb::after{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.07);
  pointer-events:none}
.rk-row:hover .rkb--rn{border-color:rgba(227,179,65,.4);color:#c8c4e2}
.rkb--r1,.rkb--r2,.rkb--r3{width:44px;height:44px;font-size:16px;border:0;color:#1a1005;
  text-shadow:0 1px 0 rgba(255,255,255,.45)}
.rkb--r1{background:linear-gradient(160deg,#fff4d0 0%,#f0cd72 34%,#e3b341 62%,#a97c22 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.3),
    0 0 0 1px rgba(247,227,176,.7),0 4px 18px rgba(227,179,65,.5)}
.rkb--r2{background:linear-gradient(160deg,#ffffff 0%,#e2e6ef 34%,#b9bfcc 62%,#767c8a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 1px rgba(226,230,239,.7),0 4px 14px rgba(185,191,204,.34)}
.rkb--r3{background:linear-gradient(160deg,#ffe0c2 0%,#f0c69b 34%,#c8814a 64%,#7d4a20 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.3),
    0 0 0 1px rgba(240,198,155,.65),0 4px 14px rgba(200,129,74,.34)}
.rkb--r1::after,.rkb--r2::after,.rkb--r3::after{inset:4px;border-color:rgba(26,16,5,.24)}
.rk-row.r1,.rk-row.r2,.rk-row.r3{position:relative}
.rk-row.r1::before,.rk-row.r2::before,.rk-row.r3::before{content:"";position:absolute;
  left:-1px;top:-1px;bottom:-1px;width:3px;z-index:2}
.rk-row.r1{background:linear-gradient(90deg,rgba(227,179,65,.20) 0%,rgba(227,179,65,.07) 34%,rgba(227,179,65,.02) 100%);
  border:1px solid rgba(227,179,65,.5);box-shadow:0 4px 22px rgba(227,179,65,.14)}
.rk-row.r1::before{background:linear-gradient(180deg,#fff4d0,#e3b341,#a97c22)}
.rk-row.r2{background:linear-gradient(90deg,rgba(200,207,220,.16) 0%,rgba(200,207,220,.06) 34%,rgba(200,207,220,.02) 100%);
  border:1px solid rgba(200,207,220,.36)}
.rk-row.r2::before{background:linear-gradient(180deg,#ffffff,#b9bfcc,#767c8a)}
.rk-row.r3{background:linear-gradient(90deg,rgba(200,129,74,.17) 0%,rgba(200,129,74,.06) 34%,rgba(200,129,74,.02) 100%);
  border:1px solid rgba(200,129,74,.4)}
.rk-row.r3::before{background:linear-gradient(180deg,#ffe0c2,#c8814a,#7d4a20)}
@media(max-width:760px){
  .rkb{width:32px;height:32px;font-size:12px}
  .rkb--r1,.rkb--r2,.rkb--r3{width:34px;height:34px;font-size:12.5px}
}