/* ═══════════════════════════════════════════════════════════════════════════
   superheromod.de – Comic-Look
   Schriften lokal (keine Verbindung zu Google), Farben als Tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:Bangers;src:url(fonts/Bangers-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/Barlow-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/Barlow-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/Barlow-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/Barlow-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#0b0d1a; --bg2:#10132a; --panel:#161a33; --panel2:#1c2142; --line:#272d55;
  --ink:#05060d;
  --yellow:#ffd23f; --yellow-d:#e6b400; --red:#ff3b5c; --cyan:#3ec9ff; --green:#3ef08a; --violet:#a07bff;
  --text:#eef0ff; --mid:#c3c8ea; --dim:#8f97bf;
  --f-display:Bangers,Impact,"Arial Black",sans-serif;
  --f-ui:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"Barlow Condensed",Barlow,system-ui,sans-serif;
  --r:6px; --sh:4px 4px 0 var(--ink); --sh-l:6px 6px 0 var(--ink);
  --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:500 15px/1.55 var(--f-ui);
  background-image:
    radial-gradient(ellipse 70% 45% at 85% -10%,#ff3b5c22,transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 0%,#3ec9ff18,transparent 60%),
    radial-gradient(#ffffff09 1.2px,transparent 1.3px);
  background-size:auto,auto,14px 14px;
  background-attachment:fixed;
}
img,svg{max-width:100%;display:block}
a{color:var(--yellow);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
code{font:600 .92em ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--yellow);background:#ffd23f14;border:1px solid #ffd23f33;border-radius:4px;padding:1px 6px;white-space:nowrap}
b,strong{font-weight:700}
h1,h2,h3,h4{margin:0;line-height:1.1}
p{margin:0 0 .7em}
[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:8px 12px;z-index:99;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:#0b0d1aee;backdrop-filter:blur(8px);border-bottom:3px solid var(--ink);box-shadow:0 2px 0 #ffffff0d}
.top-in{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);flex-shrink:0}
.logo:hover{text-decoration:none}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
.logo-mark{transition:transform .2s;filter:drop-shadow(2px 3px 0 var(--ink))}
.logo-t{font:28px/1 var(--f-display);letter-spacing:.5px;text-shadow:2px 2px 0 var(--ink)}
.logo-t b{font-weight:400;color:var(--yellow)}
.logo-t small{font-size:16px;color:var(--red);margin-left:1px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{color:var(--mid);font:700 15px/1 var(--f-num);text-transform:uppercase;letter-spacing:.8px;padding:10px 12px;border-radius:4px;position:relative}
.nav a:hover{color:var(--text);text-decoration:none;background:#ffffff0a}
.nav a.on{color:var(--ink);background:var(--yellow);box-shadow:2px 2px 0 var(--ink);transform:rotate(-1.5deg)}
.langsw{display:flex;border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:3px 3px 0 var(--ink);flex-shrink:0}
.langsw a{display:grid;place-items:center;min-width:38px;height:40px;padding:0 8px;font:700 15px/1 var(--f-num);letter-spacing:1px;color:var(--dim);background:var(--panel)}
.langsw a+a{border-left:2px solid var(--ink)}
.langsw a:hover{color:var(--text);text-decoration:none;background:var(--panel2)}
.langsw a.on{color:var(--ink);background:var(--cyan)}
.livepill{display:flex;align-items:center;gap:12px;padding:7px 8px 7px 14px;background:var(--panel);border:3px solid var(--ink);border-radius:var(--r);box-shadow:3px 3px 0 var(--ink);color:var(--mid);white-space:nowrap;flex-shrink:0;transition:transform .12s,box-shadow .12s}
.livepill:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.livepill .dot{width:12px;height:12px}
.lp-t{display:flex;flex-direction:column;gap:3px;line-height:1}
.lp-t small{font:700 11px/1 var(--f-num);text-transform:uppercase;letter-spacing:1.4px;color:var(--dim)}
.livepill.up .lp-t small{color:var(--green)}
.livepill.down .lp-t small{color:var(--red)}
.lp-t b{font:700 17px/1 var(--f-num);color:var(--text);letter-spacing:.3px}
.lp-map{color:var(--dim);font-weight:600;margin-left:6px}
.lp-map:empty{display:none}
.lp-map::before{content:"· "}
.lp-go{display:grid;place-items:center;width:34px;height:34px;border-radius:4px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);font-size:13px}
.livepill.down .lp-go{background:var(--line);color:var(--dim)}
.livepill .dot,.status .dot{width:9px;height:9px;border-radius:50%;background:var(--dim);display:inline-block;flex-shrink:0}
.livepill.up .dot,.status.up .dot{background:var(--green);box-shadow:0 0 0 0 #3ef08a88;animation:ping 2s infinite}
.livepill.down .dot,.status.down .dot{background:var(--red)}
@keyframes ping{0%{box-shadow:0 0 0 0 #3ef08a99}70%{box-shadow:0 0 0 8px #3ef08a00}100%{box-shadow:0 0 0 0 #3ef08a00}}
.navt,.burger{display:none}

/* ── Seitenkopf / Typo ────────────────────────────────────────────────── */
main{padding-top:28px;padding-bottom:40px}
.kicker{display:inline-block;font:700 13px/1 var(--f-num);letter-spacing:2px;text-transform:uppercase;color:var(--ink);background:var(--red);padding:6px 10px;transform:skew(-10deg);box-shadow:3px 3px 0 var(--ink);margin-bottom:14px}
.mega{font:clamp(46px,8vw,92px)/.92 var(--f-display);letter-spacing:1px;color:var(--text);text-shadow:4px 4px 0 var(--ink);margin:0 0 14px}
.mega span{color:var(--yellow);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--red)}
.mega.sm{font-size:clamp(40px,6vw,66px)}
.lead{font-size:18px;color:var(--mid);max-width:620px}
.pagehead{margin-bottom:24px}
.pagehead.split{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:end}
.sec{font:34px/1 var(--f-display);letter-spacing:.5px;margin:30px 0 14px;text-shadow:3px 3px 0 var(--ink)}
.dim{color:var(--dim)} .mid{color:var(--mid)} .gold{color:var(--yellow)} .up{color:var(--green);font-family:var(--f-num);font-weight:700}
.on{color:var(--green);font-weight:600}
.small{font-size:13px} .block{display:block} .nowrap{white-space:nowrap} .right{margin-left:auto}

/* ── Panels ───────────────────────────────────────────────────────────── */
.panel{background:var(--panel);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:22px;position:relative;overflow:hidden}
.panel-hot{background:linear-gradient(160deg,#2a1f45 0%,var(--panel) 55%)}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--panel2)}
.ph h2{font:24px/1 var(--f-display);letter-spacing:.8px;color:var(--yellow);text-shadow:2px 2px 0 var(--ink)}
.ph small{color:var(--dim);font-size:13px;text-align:right}
.ph .more,.more{font:700 13px/1 var(--f-num);text-transform:uppercase;letter-spacing:.8px;color:var(--cyan);white-space:nowrap}
.pad{padding:16px} .pad-x{padding:0 16px} .pb{padding-bottom:14px} .mb{margin-bottom:12px}
.empty{padding:34px 20px;text-align:center;color:var(--dim)}
.empty .big{display:block;font-size:34px;margin-bottom:8px}
.empty.sm{padding:22px 16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-2>.panel{margin-bottom:22px}

/* ── Buttons, Eingaben ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--f-num);text-transform:uppercase;letter-spacing:1px;padding:13px 20px;border:3px solid var(--ink);border-radius:var(--r);cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-go{background:var(--yellow);color:var(--ink);box-shadow:var(--sh)}
.btn-ghost{background:var(--panel2);color:var(--text);box-shadow:var(--sh)}
.btn-ghost code{background:none;border:0;padding:0;color:var(--yellow)}
.btn.sm{padding:7px 10px;font-size:13px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
.btn.wide{width:100%;margin-top:8px}
.btn.disabled{opacity:.45;pointer-events:none}
.btn.ok{background:var(--green);color:var(--ink)}
.btn.danger,.danger{color:var(--red)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.inp{font:500 15px var(--f-ui);color:var(--text);background:var(--bg2);border:2px solid var(--line);border-radius:var(--r);padding:10px 12px;width:100%;min-width:0}
.inp:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px #ffd23f33}
.inp.sm{padding:6px 28px 6px 10px;width:auto;min-width:68px}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),linear-gradient(135deg,var(--yellow) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
textarea.inp{resize:vertical;min-height:44px}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--mid);font-size:14px;cursor:pointer}
.check input[type=checkbox]{width:18px;height:18px;accent-color:var(--yellow)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-bottom:2px solid var(--ink);background:var(--panel2)}
.panel>.toolbar:first-child{border-radius:var(--r) var(--r) 0 0}
.toolbar>.inp{flex:1 1 220px;max-width:340px}
.toolbar.sticky{position:sticky;top:68px;z-index:5;border:3px solid var(--ink);border-radius:var(--r);margin-bottom:18px;box-shadow:var(--sh)}
body>main>.toolbar:not(.sticky){border:3px solid var(--ink);border-radius:var(--r);margin-bottom:18px;box-shadow:var(--sh)}
.subnav a{font:700 14px var(--f-num);text-transform:uppercase;letter-spacing:.6px;color:var(--mid)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mid);font-weight:600}
.form label.check{flex-direction:row}
.form .row{display:flex;gap:12px}
.form .btn{align-self:flex-start}
form.inline{display:flex;gap:4px}
.flash{padding:12px 16px;border:3px solid var(--ink);border-radius:var(--r);margin-bottom:20px;font-weight:600;box-shadow:var(--sh)}
.flash.ok{background:var(--green);color:var(--ink)}
.flash.err{background:var(--red);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;background:#ffffff0c;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--mid)}
.chip b{color:var(--text);font-family:var(--f-num);font-size:15px}
.tag{font:700 11px/1 var(--f-num);text-transform:uppercase;letter-spacing:.8px;font-style:normal;background:var(--cyan);color:var(--ink);padding:3px 6px;border-radius:3px;vertical-align:middle}

/* ── Avatare, Level, Rang ─────────────────────────────────────────────── */
.ava{--h:200;width:40px;height:40px;border-radius:50%;flex-shrink:0;display:inline-grid;place-items:center;font:17px/1 var(--f-display);letter-spacing:.5px;color:#fff;text-shadow:1px 1px 0 var(--ink);
  background:radial-gradient(#0002 1px,transparent 1.4px) 0 0/5px 5px,linear-gradient(145deg,hsl(var(--h) 75% 58%),hsl(calc(var(--h) + 40) 70% 38%));border:2px solid var(--ink);object-fit:cover}
.ava.xs{width:26px;height:26px;font-size:11px;border-width:2px}
.ava.sm{width:32px;height:32px;font-size:14px}
.ava.xl{width:84px;height:84px;font-size:34px;border-width:3px;box-shadow:var(--sh)}
.ava.xxl{width:120px;height:120px;font-size:48px;border-width:4px;box-shadow:var(--sh-l)}
.lv{display:inline-block;font:700 13px/1 var(--f-num);letter-spacing:.6px;color:var(--ink);background:var(--yellow);border:2px solid var(--ink);border-radius:4px;padding:3px 7px;white-space:nowrap;box-shadow:2px 2px 0 var(--ink)}
.lv.max{background:var(--red);color:#fff;text-shadow:1px 1px 0 var(--ink)}
.rk{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;font:700 17px/1 var(--f-num);color:var(--mid);border-radius:50%}
.rk.gold,.rk.silver,.rk.bronze{color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.rk.gold{background:radial-gradient(circle at 35% 30%,#fff6c4,var(--yellow) 45%,#d39b00)}
.rk.silver{background:radial-gradient(circle at 35% 30%,#fff,#cfd6ea 45%,#8d97b5)}
.rk.bronze{background:radial-gradient(circle at 35% 30%,#ffe0c4,#e39a5b 45%,#a35a20)}
.plink{color:var(--text);font-weight:700}
.plink:hover{color:var(--yellow)}
.bar{display:block;height:9px;background:var(--ink);border-radius:999px;overflow:hidden;border:1px solid #000}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),#ffe98a);border-radius:999px;transition:width .6s}
.bar.hot i{background:linear-gradient(90deg,var(--red),var(--yellow))}
.bar.lg{height:18px;border:2px solid var(--ink)}
.bar.lg i{background:repeating-linear-gradient(-45deg,#0000 0 8px,#0000001c 8px 16px),linear-gradient(90deg,var(--red),var(--yellow))}

/* ── Startseite: Splash ───────────────────────────────────────────────── */
.splash{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;margin:8px 0 28px}
.srv{background:var(--panel);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-l);padding:16px 18px;max-width:600px}
.srv.panel{margin-bottom:0}
.srv-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;min-width:0}
.srv-name{font:700 17px/1.2 var(--f-num);letter-spacing:.4px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:7px;font:700 13px/1 var(--f-num);text-transform:uppercase;letter-spacing:1px;padding:5px 10px;border-radius:999px;background:#ffffff0c;border:1px solid var(--line);flex-shrink:0}
.status.up{color:var(--green);border-color:#3ef08a55}
.status.down{color:var(--red);border-color:#ff3b5c55}
.srv-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:14px;margin-bottom:16px}
.srv-grid small{display:block;font:600 11px/1 var(--f-num);text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);margin-bottom:6px}
.srv-grid b{font:700 21px/1 var(--f-num);color:var(--text);word-break:break-all}
.srv-fill .bar{margin-top:7px}
.srv-actions{display:flex;flex-wrap:wrap;gap:10px}
.champ{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 22px 26px;color:var(--text);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-l);transform:rotate(1.2deg);
  background:radial-gradient(#ffd23f2a 1.5px,transparent 1.7px) 0 0/10px 10px,conic-gradient(from 200deg at 50% 38%,#2b2150,#3a1b3a,#192a52,#2b2150)}
.champ:hover{text-decoration:none;transform:rotate(0) translate(-2px,-2px)}
.champ .ava{margin-top:6px}
.champ-k{font:700 13px/1 var(--f-num);letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.champ-n{font:38px/1 var(--f-display);letter-spacing:.8px;color:var(--yellow);text-shadow:3px 3px 0 var(--ink);word-break:break-word}
.champ-m{display:flex;align-items:center;gap:8px;color:var(--mid)}
.champ-m b{font:700 22px/1 var(--f-num);color:var(--text)}
.champ-h{font-size:13px;color:var(--dim);max-width:340px}
.pow{position:absolute;top:-22px;left:-18px;width:86px;height:86px;display:grid;place-items:center;font:30px/1 var(--f-display);color:var(--ink);background:var(--yellow);transform:rotate(-12deg);filter:drop-shadow(3px 3px 0 var(--ink));
  clip-path:polygon(50% 0,61% 22%,85% 10%,78% 36%,100% 46%,79% 58%,90% 84%,63% 76%,50% 100%,38% 77%,11% 88%,21% 60%,0 48%,22% 36%,14% 10%,39% 22%)}
.pow.big{position:static;width:180px;height:180px;font-size:56px;margin:0 auto 18px;background:var(--red);color:#fff}

/* ── Kennzahlen ───────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:26px}
.stat{background:var(--panel);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px}
.stat:nth-child(odd){transform:rotate(-.6deg)} .stat:nth-child(even){transform:rotate(.6deg)}
.stat small{display:block;font:700 12px/1 var(--f-num);text-transform:uppercase;letter-spacing:1.3px;color:var(--dim)}
.stat b{display:block;font:44px/1.05 var(--f-display);letter-spacing:1px;color:var(--yellow);text-shadow:3px 3px 0 var(--ink);margin:6px 0 4px}
.stat span{font-size:12.5px;color:var(--dim)}

/* ── Spalten ──────────────────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.col-main,.col-side{min-width:0}

/* ── Listen ───────────────────────────────────────────────────────────── */
.fame{list-style:none;margin:0;padding:6px 0}
.fame li{display:grid;grid-template-columns:40px 44px minmax(0,1fr) auto 96px;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px dashed var(--line)}
.fame li:last-child{border-bottom:0}
.fame li:nth-child(-n+3){background:linear-gradient(90deg,#ffd23f10,transparent 60%)}
.fame li:first-child .ava{width:44px;height:44px}
.fame-n{min-width:0;display:flex;flex-direction:column}
.fame-n .plink{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fame-n small{color:var(--dim);font-size:12.5px}
.fame-x{text-align:right;font:700 22px/1 var(--f-num);color:var(--text)}
.fame-x small{font-size:11px;color:var(--dim);margin-left:3px}
.rows{list-style:none;margin:0;padding:6px 0}
.rows li{display:flex;align-items:center;gap:10px;padding:8px 16px;min-width:0}
.rows li+li{border-top:1px dashed var(--line)}
.grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.num-s{width:20px;font:700 16px var(--f-num);color:var(--dim);text-align:center;flex-shrink:0}
.w90{width:90px;flex-shrink:0} .w40{width:40px;text-align:right;font-family:var(--f-num);flex-shrink:0} .w300{width:300px}
.mini-btn{display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--ink);border-radius:4px;background:var(--panel2);box-shadow:2px 2px 0 var(--ink)}
.mini-btn:hover{text-decoration:none;background:var(--yellow)}
.feed{list-style:none;margin:0;padding:4px 0;max-height:430px;overflow:auto}
.feed li{display:flex;align-items:flex-start;gap:10px;padding:8px 16px;font-size:14px;color:var(--mid)}
.feed li+li{border-top:1px dashed var(--line)}
.feed li a{color:var(--text);font-weight:700}
.feed .fi{width:22px;text-align:center;flex-shrink:0}
.feed time{font:600 12px var(--f-num);color:var(--dim);white-space:nowrap;padding-top:2px}
.feed li.new{animation:slidein .6s ease-out;background:#ffd23f14}
@keyframes slidein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.feed.big{max-height:none}
.feed.big li{font-size:15px;padding:10px 16px}
.feed .t-max,.feed .t-top1{background:linear-gradient(90deg,#ffd23f12,transparent 70%)}
.feed .t-record{background:linear-gradient(90deg,#ff3b5c14,transparent 70%)}
.find{display:flex;gap:8px;padding-bottom:6px}
.pad-x.small{padding-bottom:14px}

/* ── Diagramme ────────────────────────────────────────────────────────── */
.dist{display:flex;align-items:flex-end;gap:3px;height:150px;padding:16px 16px 4px}
.dist>div{flex:1;height:100%;display:flex;align-items:flex-end}
.dist i{display:block;width:100%;background:linear-gradient(180deg,var(--yellow),var(--red));border:2px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0;min-height:2px}
.dist .zero i{background:var(--line);border:0}
.dist>div:hover i{filter:brightness(1.25)}
.dist-x{display:flex;gap:3px;padding:4px 16px 14px;border-top:2px solid var(--ink);margin:0 16px;padding-left:0;padding-right:0}
.dist-x span{flex:1;text-align:center;font:600 11px var(--f-num);color:var(--dim)}
.heat-wrap{overflow-x:auto;padding:16px 16px 6px}
.heat{display:grid;grid-template-columns:28px repeat(24,minmax(16px,1fr));gap:3px;min-width:520px}
.heat .hx{font:600 10px var(--f-num);color:var(--dim);text-align:center}
.heat .hl{font:700 12px/22px var(--f-num);color:var(--dim)}
.hc{height:22px;border-radius:3px;background:rgb(255 210 63 / var(--a));outline:1px solid #ffffff0a}
.hc.now{outline:2px solid var(--cyan);outline-offset:1px}
.legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:12px;color:var(--dim);padding:6px 16px 14px}
.legend i{width:16px;height:12px;border-radius:2px;background:rgb(255 210 63 / var(--a))}
.chart{width:100%;height:auto;margin-top:6px}
.chart text{font:600 11px var(--f-num);fill:var(--dim)}
.chart .grid{stroke:var(--line);stroke-dasharray:3 4}
.key{display:inline-block;width:12px;height:4px;border-radius:2px;margin:0 5px 2px 8px;vertical-align:middle}
.key.ka{background:var(--yellow)} .key.kb{background:var(--cyan)}

/* ── So geht's ────────────────────────────────────────────────────────── */
.howto{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.step{position:relative;background:var(--panel);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:22px 18px 16px;color:var(--mid)}
.step h3{font:26px/1 var(--f-display);letter-spacing:.6px;color:var(--text);margin-bottom:8px}
.step p{font-size:14px;margin:0}
.sn{position:absolute;top:-16px;right:14px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font:24px/1 var(--f-display);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.step-more{background:var(--yellow);color:var(--ink)}
.step-more h3{color:var(--ink)}
.step-more:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:var(--sh-l)}
.step-more .sn{background:var(--ink);color:var(--yellow)}

/* ── Tabellen ─────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
.tbl-wrap.tall{max-height:560px;overflow-y:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{position:sticky;top:0;background:var(--panel2);text-align:left;font:700 12px var(--f-num);text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);padding:10px 12px;border-bottom:2px solid var(--ink);white-space:nowrap;z-index:1}
.tbl td{padding:10px 12px;border-bottom:1px dashed var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:#ffffff06}
.tbl .num{text-align:right;font-family:var(--f-num);font-weight:700;font-size:16px}
.tbl th.num{text-align:right}
.tbl th.sort{cursor:pointer;user-select:none}
.tbl th.sort:hover{color:var(--text)}
.tbl th[aria-sort=ascending]::after{content:" ▲";color:var(--yellow)}
.tbl th[aria-sort=descending]::after{content:" ▼";color:var(--yellow)}
.rank-tbl td:first-child{width:54px}
.rank-tbl .xp{font-size:19px}
.rank-tbl .prog{min-width:180px}
.rank-tbl .prog small{display:block;margin-top:5px;font-size:12px}
.pcell{display:flex;align-items:center;gap:12px;min-width:220px}
.pcell-t{min-width:0}
.pcell .plink{font-size:16px}
.hchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.hchip{font-size:11.5px;font-weight:600;color:var(--mid);background:#ffffff0a;border:1px solid var(--line);border-radius:3px;padding:1px 6px;white-space:nowrap}
.hchip:hover{color:var(--ink);background:var(--yellow);border-color:var(--ink);text-decoration:none}
.hchip.more{color:var(--dim)}
.hchips.ca .hchip{border-color:#ffd23f55} .hchips.cb .hchip{border-color:#3ec9ff55}
.xp-tbl td,.xp-tbl th{padding:7px 12px}
.xp-tbl .maxrow{background:#ff3b5c18}
.form-tbl td{vertical-align:top}

/* ── Abzeichen ────────────────────────────────────────────────────────── */
.badges{display:inline-flex;flex-wrap:wrap;gap:3px;vertical-align:middle;margin-left:6px}
.badge{display:inline-flex;align-items:center;gap:5px;cursor:help}
.badge i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;font-size:13px;border-radius:50%;background:var(--panel2);border:1px solid var(--line)}
.badges.lg{display:flex;margin:12px 0 0;gap:8px}
.badges.lg .badge{background:var(--panel2);border:2px solid var(--ink);border-radius:999px;padding:3px 12px 3px 3px;box-shadow:2px 2px 0 var(--ink)}
.badges.lg .badge i{width:26px;height:26px;font-size:15px;border:0;background:#ffffff12}
.badges.lg .badge b{font:700 14px var(--f-num);letter-spacing:.5px;text-transform:uppercase}
.badge.b-legend i,.badge.b-champ i{background:var(--yellow)}
.badges.lg .b-legend,.badges.lg .b-champ{background:#3a3010}

/* ── Profil ───────────────────────────────────────────────────────────── */
.profile{--h:200;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px;margin-bottom:24px;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-l);position:relative;overflow:hidden;
  background:radial-gradient(#ffffff14 1.4px,transparent 1.6px) 0 0/11px 11px,linear-gradient(120deg,hsl(var(--h) 55% 22%),var(--panel) 60%)}
.profile::after{content:"";position:absolute;right:-60px;top:-40px;width:260px;height:300px;background:var(--red);opacity:.16;transform:skew(-18deg)}
.profile-l{display:flex;align-items:center;gap:24px;min-width:0;position:relative;z-index:1}
.profile-t{min-width:0}
.pname{font:clamp(38px,6vw,64px)/1 var(--f-display);letter-spacing:1px;color:var(--yellow);text-shadow:4px 4px 0 var(--ink);word-break:break-word}
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.profile-r{display:flex;flex-direction:column;align-items:flex-end;gap:14px;position:relative;z-index:1}
.bigrank{text-align:center;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:8px 18px;transform:rotate(3deg)}
.bigrank small{display:block;font:700 12px/1 var(--f-num);text-transform:uppercase;letter-spacing:1.5px}
.bigrank b{display:block;font:62px/1 var(--f-display)}
.prog-l{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:13px;color:var(--dim)}
.prog-l b{color:var(--yellow)}
.minis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.minis>div{background:var(--bg2);border:2px solid var(--line);border-radius:var(--r);padding:10px 12px}
.minis small{display:block;font:700 11px var(--f-num);text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.minis b{font:700 22px/1.3 var(--f-num)}
.timeline{list-style:none;margin:0;padding:10px 16px 14px;position:relative}
.timeline li{position:relative;padding:6px 0 6px 22px;font-size:14px;color:var(--mid)}
.timeline li::before{content:"";position:absolute;left:4px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink)}
.timeline li::after{content:"";position:absolute;left:8px;top:24px;bottom:-8px;width:2px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline time{display:block;font:600 12px var(--f-num);color:var(--dim)}
.banner-img{width:100%;height:auto;border:2px solid var(--ink);border-radius:4px;margin-bottom:6px}
.code-l{display:block;font:700 11px var(--f-num);text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);margin:12px 0 5px}
.code{display:flex;gap:6px}
.code input{flex:1;min-width:0;font:12px ui-monospace,Consolas,monospace;color:var(--mid);background:var(--bg2);border:2px solid var(--line);border-radius:4px;padding:6px 8px}

/* ── Helden ───────────────────────────────────────────────────────────── */
.hico{--h:200;width:44px;height:44px;flex-shrink:0;display:inline-grid;place-items:center;border-radius:8px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  font:20px/1 var(--f-display);letter-spacing:.5px;color:#fff;text-shadow:1px 1px 0 var(--ink);
  background:radial-gradient(#0000002a 1.3px,transparent 1.5px) 0 0/6px 6px,linear-gradient(135deg,hsl(var(--h) 80% 60%),hsl(calc(var(--h) + 50) 75% 40%));transform:rotate(-3deg)}
.hico em{font-style:normal;font-size:.95em}
.hico.sm{width:30px;height:30px;font-size:14px;border-radius:6px}
.hico.lg{width:56px;height:56px;font-size:26px;border-width:3px}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.hgrid.sm{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:16px}
.hcard{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:16px;color:var(--text);scroll-margin-top:150px;transition:transform .12s}
a.hcard:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:var(--sh-l)}
.hgrid.sm .hcard{padding:12px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}
.hcard:target{outline:3px solid var(--yellow);outline-offset:3px;animation:pulse 1s 2}
@keyframes pulse{50%{outline-color:transparent}}
.hcard-h{display:flex;align-items:center;gap:12px;min-width:0}
.hcard-h h3,.hcard-h b{font:24px/1 var(--f-display);letter-spacing:.6px;font-weight:400}
.hgrid.sm .hcard-h b{font-size:20px}
.hcard-h small{display:block;font-size:12.5px;margin-top:3px;color:var(--dim)}
.hdesc{font-size:14px;color:var(--mid);margin:0}
.hfacts{display:flex;flex-wrap:wrap;gap:5px}
.hwho{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.hwho .small{margin-left:6px}
.hpop{display:flex;align-items:center;gap:10px;margin-top:auto;font:700 13px var(--f-num);color:var(--dim)}
.hpop .bar{flex:1}
.poprank{list-style:none;margin:0;padding:6px 0}
.poprank li{display:flex;align-items:center;gap:12px;padding:7px 16px}
.poprank li+li{border-top:1px dashed var(--line)}
.poprank .plink{width:170px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dice .ph{background:#3a1b3a}
.dice-out{display:flex;gap:12px;flex-wrap:wrap;min-height:112px;align-items:stretch;margin-bottom:14px}
.dice-out>.dim{align-self:center}
.dice-h{flex:1 1 90px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:10px 6px;background:var(--bg2);border:2px solid var(--ink);border-radius:var(--r);color:var(--text);box-shadow:2px 2px 0 var(--ink)}
.dice-h:hover{text-decoration:none;background:var(--panel2)}
.dice-h b{font:18px/1.05 var(--f-display);letter-spacing:.5px;font-weight:400}
.dice-h small{font-size:11px;color:var(--dim)}
.dice-out.rolling .dice-h{filter:blur(.6px);opacity:.75}
.dice-out.landed .dice-h{animation:land .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes land{from{transform:scale(.7) rotate(-6deg)}to{transform:none}}
.dice-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dice-ctl .btn{margin-left:auto}

/* ── Helden-Lexikon ───────────────────────────────────────────────────── */
.sec small{font-family:var(--f-ui);text-shadow:none;letter-spacing:0;margin-left:8px}
.lex-bar .seg{flex:1 1 100%;order:3}
.lex-bar .seg button{padding:7px 10px;font-size:13px}
.hcard{position:relative;--cc:var(--line)}
.hcard::before{content:"";position:absolute;left:-3px;right:-3px;top:-3px;height:6px;background:var(--cc);border-radius:var(--r) var(--r) 0 0}
.hcard.c-weapon{--cc:#ff8a3d}.hcard.c-melee{--cc:var(--red)}.hcard.c-move{--cc:var(--cyan)}
.hcard.c-stealth{--cc:var(--violet)}.hcard.c-survive{--cc:var(--green)}.hcard.c-special{--cc:var(--yellow)}
.hcat{margin-left:auto;align-self:flex-start;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg2);border:2px solid var(--cc);font-size:15px;flex-shrink:0}
.hcard-h>div{min-width:0}
.hpower{display:inline-block;align-self:flex-start;font:700 14px/1.2 var(--f-num);letter-spacing:.6px;text-transform:uppercase;color:var(--ink);background:var(--cc);padding:4px 9px;border-radius:3px;transform:skew(-8deg);box-shadow:2px 2px 0 var(--ink)}
.hcard.c-melee .hpower,.hcard.c-stealth .hpower{color:#fff;text-shadow:1px 1px 0 var(--ink)}
.chip.ck{border-color:#ffd23f66;color:var(--yellow)}
.chip.ca{border-color:#3ef08a55;color:var(--green)}

/* ── Duell ────────────────────────────────────────────────────────────── */
.duel-pick{display:flex;align-items:center;gap:14px;padding:14px 16px}
.duel-pick .inp{flex:1}
.vs,.duel-vs{font:34px/1 var(--f-display);color:var(--red);text-shadow:3px 3px 0 var(--ink)}
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-bottom:22px}
.fighter{--h:200;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;text-align:center;color:var(--text);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-l);
  background:radial-gradient(#ffffff12 1.4px,transparent 1.6px) 0 0/10px 10px,linear-gradient(160deg,hsl(var(--h) 55% 26%),var(--panel))}
.fighter:hover{text-decoration:none}
.fighter b{font:40px/1 var(--f-display);letter-spacing:1px;color:var(--yellow);text-shadow:3px 3px 0 var(--ink);word-break:break-word}
.f-a{transform:rotate(-1.5deg)} .f-b{transform:rotate(1.5deg)}
.f-b b{color:var(--cyan)}
.duel-vs{font-size:64px;padding:10px;transform:rotate(-8deg)}
.cmp{padding:10px 16px 4px}
.cmp-row{display:grid;grid-template-columns:110px 1fr 140px 1fr 110px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.cmp-row:last-child{border-bottom:0}
.cmp-lab{text-align:center;font:700 13px var(--f-num);text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.cmp-v{font:700 20px var(--f-num);color:var(--mid)}
.cmp-v.r{text-align:right}
.cmp-v.win{color:var(--text)}
.cmp-v.win::after{content:" ★";color:var(--yellow);font-size:14px}
.cmp-v.r.win::after{content:""}.cmp-v.r.win::before{content:"★ ";color:var(--cyan);font-size:14px}
.cmp-bar{display:flex;height:12px;background:var(--ink);border-radius:999px;overflow:hidden}
.cmp-bar.l{justify-content:flex-end}
.cmp-bar i{display:block;height:100%}
.cmp-bar.l i{background:var(--yellow);border-radius:999px 0 0 999px}
.cmp-bar.r i{background:var(--cyan);border-radius:0 999px 999px 0}
.verdict{display:flex;align-items:center;gap:18px;padding:16px;border-top:2px solid var(--ink);background:var(--panel2)}
.verdict p{margin:0;color:var(--mid)}
.verdict b{color:var(--text)}
.score{font:44px/1 var(--f-display);color:var(--ink);background:var(--yellow);border:3px solid var(--ink);border-radius:var(--r);padding:6px 14px;box-shadow:var(--sh);white-space:nowrap;transform:rotate(-3deg)}
.loadcmp h4{font:700 12px var(--f-num);text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);margin:12px 0 4px}
.loadcmp h4:first-child{margin-top:0}

/* ── Überschrift in Boxen (News) ── */
.q{font:26px/1.1 var(--f-display);letter-spacing:.5px;margin-bottom:12px;font-weight:400}

/* ── Filter-Leiste (Chronik) ──────────────────────────────────────────── */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--f-num);text-transform:uppercase;letter-spacing:.8px;color:var(--mid);background:var(--bg2);border:2px solid var(--ink);border-radius:var(--r);padding:8px 12px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .12s,box-shadow .12s,color .12s}
.seg button:hover{color:var(--text);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.seg button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.seg button.on{color:var(--ink);background:var(--yellow);transform:rotate(-1.5deg)}

/* ── Server-Seite ─────────────────────────────────────────────────────── */
.cmds{list-style:none;margin:0;padding:8px 0}
.cmds li{display:flex;align-items:center;gap:16px;padding:10px 16px}
.cmds li+li{border-top:1px dashed var(--line)}
.cmd{flex-shrink:0;min-width:130px;font:700 16px ui-monospace,Consolas,monospace;color:var(--ink);background:var(--yellow);border:2px solid var(--ink);border-radius:4px;padding:6px 10px;box-shadow:2px 2px 0 var(--ink);cursor:copy;text-align:left}
.cmd:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.cmd.ok{background:var(--green)}
.faq details{border-top:1px dashed var(--line)}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:24px/1 var(--f-display);color:var(--yellow)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 16px 14px;color:var(--mid);margin:0}

/* ── Texte (News, Rechtliches) ────────────────────────────────────────── */
.prose{color:var(--mid);font-size:15.5px;line-height:1.65}
.prose p{margin:0 0 .9em}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--text)}
.prose h3{font:24px/1.1 var(--f-display);letter-spacing:.5px;color:var(--text);margin:22px 0 8px;font-weight:400}
.prose h3:first-child{margin-top:0}
.legal .prose{max-width:820px}
.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px}
.login{max-width:440px;margin:30px auto}
.en-box{border:2px dashed var(--line);border-radius:var(--r);padding:10px 12px}
.en-box summary{cursor:pointer;font-weight:600;color:var(--mid);font-size:13px}
.en-box[open] summary{margin-bottom:10px}
.en-box label{margin-top:8px}
.lost{text-align:center;padding:40px 0}
.lost .lead{margin:0 auto 20px}

/* ── Fuß ──────────────────────────────────────────────────────────────── */
.foot{border-top:3px solid var(--ink);background:#080a14;margin-top:30px;padding:26px 0 18px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:13px}
.foot-brand b{font:22px/1 var(--f-display);letter-spacing:.6px;color:var(--text);font-weight:400}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--mid);font:700 14px var(--f-num);text-transform:uppercase;letter-spacing:.8px}
.foot-note{font-size:12px;color:#5d6488;margin-top:16px}

/* ── Kontakt ──────────────────────────────────────────────────────────── */
.types{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.types legend{font-size:13px;color:var(--mid);font-weight:600;margin-bottom:8px;padding:0}
.type{position:relative;cursor:pointer}
.type input{position:absolute;opacity:0}
.type span{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 8px;background:var(--bg2);border:2px solid var(--line);border-radius:var(--r);font:700 14px/1.2 var(--f-num);text-transform:uppercase;letter-spacing:.6px;color:var(--mid);transition:.12s}
.type span i{font-style:normal;font-size:24px}
.type:hover span{border-color:var(--mid);color:var(--text)}
.type input:checked+span{background:var(--yellow);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-1deg)}
.type input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact .check{align-items:flex-start}
.contact .check input{margin-top:2px;flex-shrink:0}
.steps-mini{margin:0;padding:12px 16px 6px 36px;color:var(--mid);font-size:14px}
.steps-mini li{margin-bottom:8px}
.steps-mini li::marker{font-family:var(--f-display);color:var(--yellow);font-size:18px}
.req{border:2px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:0 16px 10px;background:var(--bg2)}
.req.open{border-color:var(--yellow)}
.req p{margin:6px 0 0;color:var(--mid);white-space:pre-wrap;font-size:14px}
.req .inline{margin-top:8px;flex-wrap:wrap}

/* ── Besucherzähler ───────────────────────────────────────────────────── */
.counter{display:flex;flex-direction:column;align-items:center;gap:6px}
.ctr-lab{font:700 11px/1 var(--f-num);letter-spacing:2px;text-transform:uppercase;color:var(--ink);background:var(--red);padding:4px 9px;transform:skew(-10deg);box-shadow:2px 2px 0 var(--ink)}
.odo{display:flex;gap:3px;padding:5px;background:var(--ink);border:3px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 #000,inset 0 0 0 2px #ffd23f33}
.odo i{font:30px/1 var(--f-display);font-style:normal;color:var(--yellow);text-shadow:2px 2px 0 #b34a00;width:26px;height:38px;display:grid;place-items:center;border-radius:3px;
  background:linear-gradient(180deg,#1d2140 0%,#141831 48%,#0b0d1a 50%,#171b36 100%);position:relative;overflow:hidden}
.odo i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#000a}
.odo i.z{color:#4a5070;text-shadow:none}
.odo i:last-child{animation:odo .9s cubic-bezier(.2,1.5,.4,1) both}
@keyframes odo{from{transform:translateY(-60%);opacity:0}to{transform:none;opacity:1}}
.ctr-sub{font-size:12px;color:var(--dim)}
.ctr-sub b{color:var(--mid);font-family:var(--f-num)}

/* ── Responsiv ────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .cols{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
  .howto{grid-template-columns:1fr 1fr}
  .top-in{gap:14px}
  .nav a{padding:10px 8px;font-size:14px}
  .lp-map{display:none}
}
@media (max-width:900px){
  .burger{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;cursor:pointer;border:2px solid var(--line);border-radius:var(--r);order:3}
  .burger span,.burger span::before,.burger span::after{display:block;width:20px;height:3px;background:var(--text);border-radius:2px;position:relative;transition:.2s}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0}
  .burger span::before{top:-7px} .burger span::after{top:7px}
  .navt:checked~.burger span{background:transparent}
  .navt:checked~.burger span::before{top:0;transform:rotate(45deg)}
  .navt:checked~.burger span::after{top:0;transform:rotate(-45deg)}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:3px solid var(--ink);padding:8px 16px 14px;box-shadow:0 10px 30px #0008}
  .navt:checked~.nav{display:flex}
  .nav a{padding:13px 10px;font-size:17px;border-bottom:1px dashed var(--line)}
  .nav a.on{transform:none}
  .livepill{order:2;margin-left:auto}
  .langsw{order:1;margin-left:auto}
  .langsw+.livepill{margin-left:0}
  .burger{margin-left:0}
  .splash,.pagehead.split{grid-template-columns:1fr}
  .splash-r{max-width:480px}
  .grid-2,.cols-2{grid-template-columns:1fr}
  .toolbar.sticky{top:68px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  body{font-size:15px}
  .top-in{height:60px}
  .nav{top:60px}
  .logo-t{font-size:22px} .logo-t small{font-size:13px}
  .logo-mark{width:34px;height:34px}
  .livepill{padding:5px 5px 5px 10px;gap:8px}
  .lp-t small,.lp-map{display:none}
  .lp-t b{font-size:15px}
  .lp-go{width:28px;height:28px}
  .lp-w{display:none}
  .langsw a{min-width:30px;height:34px;padding:0 6px;font-size:13px}
  .top-in{gap:8px}
  .toolbar.sticky{top:60px}
  main{padding-top:20px}
  .mega{text-shadow:3px 3px 0 var(--ink)}
  .mega span{text-shadow:3px 3px 0 var(--red)}
  .lead{font-size:16px}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stats .stat:last-child{grid-column:span 2}
  .stat b{font-size:36px}
  .srv-grid{grid-template-columns:1fr 1fr}
  .srv-fill{grid-column:span 2}
  .srv-actions .btn{flex:1 1 auto}
  .champ{transform:none}
  .champ-n{font-size:32px}
  .fame li{grid-template-columns:34px 36px minmax(0,1fr) auto;gap:10px;padding:9px 12px}
  .fame li .ava{width:36px;height:36px;font-size:15px}
  .fame-x{grid-column:3/5;grid-row:2;text-align:left;font-size:15px;margin-top:-4px}
  .fame li:first-child .ava{width:36px;height:36px}
  .howto{grid-template-columns:1fr;gap:22px}
  .hide-sm{display:none}
  .pcell{min-width:0}
  .pcell .ava{display:none}
  .rank-tbl .hchips{display:none}
  .rank-tbl td{padding:9px 8px}
  .profile{padding:20px;flex-direction:column;align-items:flex-start}
  .profile-l{flex-direction:column;align-items:flex-start;gap:14px}
  .profile-r{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .ava.xxl{width:92px;height:92px;font-size:38px}
  .bigrank b{font-size:44px}
  .minis{grid-template-columns:1fr 1fr}
  .duel{grid-template-columns:1fr;gap:10px}
  .duel-vs{font-size:44px;text-align:center}
  .f-a,.f-b{transform:none}
  .duel-pick{flex-wrap:wrap}
  .duel-pick .inp{flex:1 1 100%}
  .duel-pick .vs{display:none}
  .duel-pick .btn{width:100%}
  .cmp-row{grid-template-columns:1fr 1fr;gap:6px 10px}
  .cmp-lab{grid-column:1/3;grid-row:1}
  .cmp-bar{display:none}
  .cmp-v.r{text-align:right}
  .verdict{flex-direction:column;align-items:flex-start}
  .poprank .plink{width:110px}
  .cmds li{flex-direction:column;align-items:flex-start;gap:6px}
  .seg button{padding:7px 9px;font-size:13px}
  .hgrid{grid-template-columns:1fr}
  .types{grid-template-columns:1fr}
  .type span{flex-direction:row;justify-content:flex-start;padding:10px 12px}
  .dice-ctl .btn{margin-left:0;width:100%}
  .w300{width:auto}
  .form .row{flex-direction:column}
  .foot-in{flex-direction:column;align-items:flex-start}
  .counter{align-self:center;margin:6px 0}
}
@media (max-width:480px){
  .lp-t{display:none}
  .livepill{padding:4px 4px 4px 9px}
  .logo-t{font-size:20px}
  .logo{gap:7px}
  .logo-mark{width:30px;height:30px}
  .burger{width:40px;height:40px}
  .langsw a{min-width:28px;padding:0 5px}
}
.pad-t{padding-top:12px}