/* ============================================================
   Zepharis-Portal — Farben und Schriften aus dem Claude-Design-Export
   ============================================================ */

@font-face{font-family:"Open Sans";font-weight:300 800;font-style:normal;font-display:swap;src:url(fonts/opensans-latin.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:400 900;font-style:normal;font-display:swap;src:url(fonts/cinzel-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-400-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/barlow-500-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-600-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-display:swap;src:url(fonts/barlow-700-latin.woff2) format("woff2")}

:root{
  --bg:#070610;
  --bg-deep:#0b0916;
  --card:#141020;
  --card-2:#0d0a18;
  --line:#2a2242;
  --line-2:#3a2f5e;
  --accent:#7b5cff;
  --accent-soft:rgba(123,92,255,.12);
  --cyan:#46d8e0;
  --green:#6fe08a;
  --red:#ff6b7d;
  --text:#ece9f7;
  --text-2:#d8d2ee;
  --muted:#a79fc4;
  --muted-2:#8b83a8;
  --ink:#ffffff;
  --tile:rgba(12,10,22,.55);
  --field:#0a0814;
  /* Titelleisten: violetter Verlauf mit feiner Schraffur */
  --head-bg:linear-gradient(90deg,#1b1030 0%,#2a1749 48%,#3a1a63 100%);
  --head-tex:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,rgba(255,255,255,0) 1px 8px);
  --f-head:"Cinzel",Georgia,serif;
  --f-body:"Open Sans","Barlow",-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(1100px 560px at 50% -10%, rgba(123,92,255,.16), transparent 70%), var(--bg);
  color:var(--text);font:16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-family:var(--f-head);font-weight:700;letter-spacing:1.5px;margin:0 0 14px;color:#fff}
h1{font-size:26px}
h2{font-size:19px}

/* ---------- Navigation ---------- */
.zp-nav{position:sticky;top:0;z-index:10;background:rgba(7,6,16,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.zp-nav-in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:20px}
.zp-logo img{height:42px;width:auto;display:block}
.zp-links{flex:1;display:flex;gap:4px}
.zp-links a{padding:9px 13px;border-radius:7px;color:var(--muted);font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.zp-links a:hover{color:var(--text);background:var(--accent-soft);text-decoration:none}
.zp-links a.is-active{color:var(--cyan)}
.zp-actions{display:flex;gap:8px;align-items:center}
.zp-actions form{margin:0}

/* ---------- Buttons ---------- */
.zp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  font:600 14px/1 var(--f-body);letter-spacing:1px;text-transform:uppercase;color:#fff;
  transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.zp-btn:hover{text-decoration:none}
.zp-btn-primary{background:var(--accent);box-shadow:0 4px 20px rgba(123,92,255,.45)}
.zp-btn-primary:hover{box-shadow:0 6px 26px rgba(123,92,255,.7);transform:translateY(-1px)}
.zp-btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text-2)}
.zp-btn-ghost:hover,.zp-btn-ghost.is-active{border-color:var(--accent);background:var(--accent-soft);color:#fff}
.zp-btn-block{width:100%;padding:13px 18px}

/* ---------- Grundgeruest ---------- */
.zp-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:32px 20px 48px;display:flex;flex-direction:column;gap:22px}
.zp-card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.zp-narrow{max-width:460px;width:100%;margin:0 auto}
.zp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.zp-lead{color:var(--muted);margin:-4px 0 18px}
.zp-sub{color:var(--muted-2);font-size:14px;margin:16px 0 0}
.zp-muted{color:var(--muted-2)}
.zp-empty{color:var(--muted);padding:18px 0}

/* ---------- Formulare ---------- */
.zp-form{display:flex;flex-direction:column;gap:14px}
.zp-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.zp-form small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted-2)}
.zp-form input,.zp-search input{
  width:100%;padding:11px 12px;border-radius:7px;border:1px solid var(--line);
  background:#0a0814;color:var(--text);font:15px var(--f-body);outline:none;
}
.zp-form input:focus,.zp-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,92,255,.18)}
.zp-form button{margin-top:6px}
.zp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Hinweise ---------- */
.zp-alert{padding:12px 14px;border-radius:8px;margin:0 0 14px;font-size:15px;border:1px solid}
.zp-alert-error{background:rgba(255,107,125,.1);border-color:rgba(255,107,125,.4);color:#ffc2ca}
.zp-alert-ok{background:rgba(111,224,138,.1);border-color:rgba(111,224,138,.4);color:#c9f5d4}
.zp-alert-info{background:rgba(70,216,224,.1);border-color:rgba(70,216,224,.35);color:#c4f3f6}
.zp-main > .zp-alert{max-width:1180px;width:100%}

/* ---------- Kontodaten ---------- */
.zp-facts{margin:0;display:grid;gap:10px}
.zp-facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;background:var(--bg-deep);border:1px solid var(--line)}
.zp-facts dt{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.zp-facts dd{margin:0;color:var(--text);font-weight:600;display:flex;align-items:center;gap:8px;text-align:right;word-break:break-all}
.zp-reveal summary{cursor:pointer;color:var(--cyan);font-weight:600;list-style:none}
.zp-reveal summary::-webkit-details-marker{display:none}
.zp-reveal[open] summary{display:none}
.zp-reveal code{font:700 17px/1 ui-monospace,Consolas,monospace;letter-spacing:3px;color:var(--green)}

/* ---------- Tabellen ---------- */
.zp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.zp-table{width:100%;border-collapse:collapse;font-size:15px}
.zp-table th{text-align:left;padding:11px 14px;background:var(--bg-deep);color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap}
.zp-table td{padding:11px 14px;border-bottom:1px solid rgba(42,34,66,.6);white-space:nowrap}
.zp-table tbody tr:last-child td{border-bottom:0}
.zp-table tbody tr:hover{background:var(--accent-soft)}
.zp-name{font-weight:700;color:#fff}
.zp-pos{font-family:var(--f-head);font-weight:700;color:var(--muted);width:56px}
/* Die ersten drei in Gold, Silber und Bronze — passend zu den Kronen */
.zp-top1{background:linear-gradient(90deg,rgba(240,180,41,.14),transparent 60%)}
.zp-top2{background:linear-gradient(90deg,rgba(207,214,222,.13),transparent 60%)}
.zp-top3{background:linear-gradient(90deg,rgba(192,123,62,.14),transparent 60%)}
.zp-top1 .zp-pos{color:#f0b429}
.zp-top2 .zp-pos{color:#cfd6de}
.zp-top3 .zp-pos{color:#c07b3e}

/* Charakter-Portraets: Bild ueber Farbverlauf, fehlt das Bild, bleibt der Verlauf */
.zp-ava{
  display:inline-block;width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  margin-right:10px;vertical-align:middle;border:1px solid var(--line-2);
  background:linear-gradient(135deg,rgba(123,92,255,.35),rgba(12,10,22,.9));
  background-size:cover;background-position:center;
}
.zp-ava-krieger {background-image:url(chars/krieger.png),linear-gradient(135deg,rgba(123,92,255,.35),rgba(12,10,22,.9))}
.zp-ava-ninja   {background-image:url(chars/ninja.png),linear-gradient(135deg,rgba(123,92,255,.35),rgba(12,10,22,.9))}
.zp-ava-sura    {background-image:url(chars/sura.png),linear-gradient(135deg,rgba(123,92,255,.35),rgba(12,10,22,.9))}
.zp-ava-schamane{background-image:url(chars/schamane.png),linear-gradient(135deg,rgba(123,92,255,.35),rgba(12,10,22,.9))}
.zp-top1 .zp-ava{border-color:#f0b429}
.zp-top2 .zp-ava{border-color:#cfd6de}
.zp-top3 .zp-ava{border-color:#c07b3e}


/* Reichsflagge (30x19) und Platz-Symbole 1-3 (26x19) */
.zp-flag{display:inline-block;width:30px;height:19px;margin-right:8px;vertical-align:-4px}
.zp-rank-ico{display:block;width:26px;height:19px}

/* ---------- Rangliste ---------- */
.zp-rank-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.zp-rank-head h1{margin:0}
.zp-tabs{display:flex;gap:6px}
.zp-tabs a{padding:8px 16px;border-radius:7px;border:1px solid var(--line-2);color:var(--text-2);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:1px}
.zp-tabs a:hover{text-decoration:none;border-color:var(--accent)}
.zp-tabs a.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.zp-search{display:flex;gap:8px;margin-bottom:16px}
.zp-search input{max-width:320px}
.zp-pager{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:16px;color:var(--muted)}

/* ---------- Fuss ---------- */
.zp-foot{border-top:1px solid var(--line);padding:22px 20px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;color:var(--muted-2);font-size:14px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .zp-grid2{grid-template-columns:1fr}
  .zp-links{display:none}
  .zp-nav-in{justify-content:space-between}
}
@media (max-width:520px){
  .zp-logo img{height:32px}
  .zp-actions .zp-btn{padding:8px 11px;font-size:12px}
  .zp-card{padding:20px}
  .zp-search{flex-wrap:wrap}
  .zp-search input{max-width:none}
}