@font-face {
  font-family: "Bebas Neue";
  src: url("assets/bebas-neue.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/roboto-condensed.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg-void: #0a0712;
  --violet: #b24bff;
  --violet-soft: #c892ff;
  --violet-glow: rgba(178, 75, 255, .45);
  --card: rgba(30, 18, 48, .46);
  --card-border: rgba(178, 75, 255, .32);
  --ink: #f6f4fb;
  --muted: #ada6c4;
  --live: #ff2f6e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-void);
}

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: "Roboto Condensed", sans-serif;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(ellipse 560px 380px at 50% -6%, rgba(178,75,255,.28), transparent 68%),
    radial-gradient(ellipse 420px 420px at 100% 60%, rgba(178,75,255,.10), transparent 60%),
    var(--bg-void);
}

a { color: inherit; text-decoration: none; }

a:focus-visible {
  outline: 3px solid var(--violet-soft);
  outline-offset: 3px;
  border-radius: 14px;
}

.page {
  width: 100%;
  max-width: 420px;
  padding: 36px 20px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Kopfbereich ---------- */

.head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 0 16px rgba(178,75,255,.35));
  margin-bottom: 14px;
}

.avatar-ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--violet), rgba(178,75,255,.15));
  box-shadow: 0 0 20px var(--violet-glow);
}

.avatar-ring img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-void);
}

.tagline {
  margin: 12px 0 0;
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--muted);
}

.live-badge {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border-radius: 999px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  letter-spacing: .07em;
  color: #fff;
  background: rgba(255,47,110,.14);
  border: 1px solid rgba(255,47,110,.55);
  animation: live-pulse 2s ease-in-out infinite;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  display: inline-block;
  box-shadow: 0 0 8px var(--live);
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,47,110,0); }
  50% { box-shadow: 0 0 16px rgba(255,47,110,.5); }
}

@media (prefers-reduced-motion: reduce) {
  .live-badge { animation: none; }
}

/* ---------- Glas-Karten ---------- */

.card {
  width: 100%;
  display: block;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.card:hover,
.card:focus-visible {
  border-color: rgba(178,75,255,.75);
  box-shadow: 0 0 22px rgba(178,75,255,.25);
}

.card:active { transform: translateY(1px); }

/* ---------- Power-Ranking-Feld ---------- */

.pr-card {
  margin-top: 20px;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr-label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--violet-soft);
}

.pr-value {
  font-family: "Bebas Neue", sans-serif;
  font-size: 42px;
  line-height: 1.05;
  color: #fff;
}

.pr-value small {
  font-size: 19px;
  color: var(--muted);
  margin-left: 4px;
}

.pr-sub {
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Link-Liste ---------- */

.links {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.link-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.icon {
  width: 21px;
  height: 21px;
  flex: none;
  color: var(--violet-soft);
}

.label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--ink);
}

@media (min-width: 540px) {
  .page { padding-top: 52px; }
  .logo { max-width: 320px; }
}

/* Entwurf 2: B-Abstände, A-Metallfassung. Die anklickbare Fläche bleibt
   ungeclippt, damit der äußere Tastaturfokus vollständig sichtbar ist. */
body { position: relative; isolation: isolate;
  background: radial-gradient(ellipse 620px 480px at 50% 0%, #321348 0%, transparent 72%),
    radial-gradient(ellipse 600px 800px at 90% 65%, #180c29 0%, transparent 75%), #09060f; }
body::before { content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; background-image: url("assets/waben.svg");
  mask-image: radial-gradient(ellipse at 50% 30%, #000 5%, #0009 65%, transparent 100%); }
.avatar-ring { padding: 3px;
  background: conic-gradient(from 180deg, #f2eff8, #6c6680 25%, #241d33 50%, #b9b3cb 75%, #f2eff8);
  box-shadow: 0 0 20px rgba(178,75,255,.35); }
.card, .live-badge { position: relative; isolation: isolate; border: 1px solid transparent;
  border-radius: 0; background: transparent; box-shadow: none; }
.card::before, .live-badge::before,
.card::after, .live-badge::after { content: ""; position: absolute; z-index: -1;
  pointer-events: none; clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); }
.card::before, .live-badge::before { --cut: 16px; inset: -1px;
  background: linear-gradient(135deg,#f2eff8,#6c6680 35%,#241d33 55%,#b9b3cb 100%); }
.card::after, .live-badge::after { --cut: 14px; inset: 1px;
  background: linear-gradient(160deg,rgba(33,20,48,.94),rgba(10,7,18,.96) 75%);
  box-shadow: inset 0 0 0 1px rgba(178,75,255,.55),inset 0 0 18px rgba(178,75,255,.16); }
.live-badge::before { --cut: 9px; }
.live-badge::after { --cut: 7px; }
.live-badge { animation: none; }
.live-dot { animation: status-pulse 2s ease-in-out infinite; }
@keyframes status-pulse { 50% { box-shadow: 0 0 12px 2px var(--live); } }
.card:hover, .card:focus-visible { border-color: transparent; box-shadow: none; }
.card:hover::after, .card:focus-visible::after,
.live-badge:hover::after, .live-badge:focus-visible::after {
  box-shadow: inset 0 0 0 1px #c892ff,inset 0 0 22px rgba(178,75,255,.3); }
a:focus-visible { outline: 3px solid #dfb9ff; outline-offset: 4px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:active { transform: none; }
}