/* DME Profile — Usercard Popover. Reskin "Bunker Net": Glass-Karte mit
 * Cyan-Glow, Chakra Petch (UI) + Manrope (Body).
 */

.dmep-uc {
  position: absolute;
  z-index: 100000;
  width: 300px;
  max-width: calc(100vw - 24px);
  background: rgba(18,28,34,.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(110,200,210,.13);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(34,211,238,.14);
  font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: #d6e4e8;
  overflow: hidden;
  animation: dmep-uc-in .15s ease;
}

@keyframes dmep-uc-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Schliessen-Button ---- */
.dmep-uc-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: #7e949c;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .15s, background .15s;
}
.dmep-uc-close:hover { color: #d6e4e8; background: rgba(110,200,210,.08); }

/* ---- Lade- / Fehlerzustand ---- */
.dmep-uc-loading,
.dmep-uc-error {
  padding: 18px 20px;
  color: #7e949c;
  font-size: 13px;
}

/* ---- Header (Avatar + Info) ---- */
.dmep-uc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(110,200,210,.13);
}

/* ---- Avatar ---- */
.dmep-uc-avawrap {
  position: relative;
  flex-shrink: 0;
}
.dmep-uc-ava {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #10262b, #0c1c20);
  border: 2px solid #22d3ee;
  box-shadow: 0 0 0 3px rgba(34,211,238,.12), 0 0 18px rgba(34,211,238,.3);
}
.dmep-uc-ava-ph {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10262b, #0c1c20);
  border: 1px solid rgba(110,200,210,.26);
  color: #5eeaff;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.dmep-uc-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4d5e65;
  border: 2px solid #0a1116;
}
.dmep-uc-dot.on { background: #a3e635; box-shadow: 0 0 8px #a3e635; }

/* Badge (serverseitig gerendert, z.B. ein kleines Icon) */
.dmep-uc-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 0;
  line-height: 0;
}
.dmep-uc-badge img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #0a1116;
  display: block;
}

/* ---- Info-Bereich ---- */
.dmep-uc-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.dmep-uc-name {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #eafcff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  padding-right: 28px; /* Platz fuer Close-Button */
}

/* ---- Rollen-Badge ---- (Hintergrund/Farbe koennen inline aus der
   Rollenfarbe gesetzt werden — Defaults hier ueberschreiben das nicht). */
.dmep-uc-role-badge {
  display: inline-block;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 24px;
  border: 1px solid rgba(110,200,210,.26);
  background: rgba(22,34,41,.70);
  color: #d6e4e8;
  margin-bottom: 5px;
  white-space: nowrap;
}
.dmep-uc-glossy {
  background-clip: padding-box;
}

/* ---- Tags (Online/Fraktion/Level) ---- */
.dmep-uc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.dmep-uc-tag {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 24px;
  background: rgba(110,200,210,.06);
  border: 1px solid rgba(110,200,210,.13);
  color: #7e949c;
  white-space: nowrap;
}
.dmep-uc-tag.on  { background: rgba(163,230,53,.12); color: #a3e635; border-color: rgba(163,230,53,.3); }
.dmep-uc-tag.off { background: rgba(110,200,210,.05); color: #7e949c; }
.dmep-uc-tag.lvl { background: rgba(251,191,36,.1);   color: #fbbf24; border-color: rgba(251,191,36,.3); }

/* ---- Statistiken ---- */
.dmep-uc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 10px 16px 12px;
  border-bottom: 1px solid rgba(110,200,210,.13);
}
.dmep-uc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  border-right: 1px solid rgba(110,200,210,.13);
}
.dmep-uc-stat:last-child { border-right: none; }
.dmep-uc-sv {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #5eeaff;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.dmep-uc-sk {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 10px;
  color: #7e949c;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dmep-uc-nodata {
  padding: 10px 16px;
  color: #4d5e65;
  font-size: 12px;
  text-align: center;
  border-bottom: 1px solid rgba(110,200,210,.13);
}

/* ---- Footer (Profil-Button) ---- */
.dmep-uc-foot {
  padding: 10px 16px;
}
.dmep-uc-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 12px;
  background: linear-gradient(135deg, #22d3ee, #2dd4bf);
  /* Dunkler Text + kein Unterstrich gegen Theme-Link-Styles erzwingen. */
  color: #04141a !important;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 8px 22px rgba(34,211,238,.22);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.dmep-uc-btn:hover,
.dmep-uc-btn:focus {
  color: #04141a !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(94,234,255,.5), 0 10px 30px rgba(34,211,238,.4);
}
.dmep-uc-btn:active { transform: none; }

/* ---- Freundes-Aktionen (optional, via dme-community) ---- */
.dmep-uc-friend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dmep-uc-friend:empty { margin-top: 0; }

/* Sekundaerer Button-Stil, Glass. */
.dmep-uc-fbtn {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  padding: 8px 12px;
  background: rgba(22,34,41,.70);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(110,200,210,.13);
  color: #d6e4e8 !important;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.dmep-uc-fbtn:hover:not(:disabled),
.dmep-uc-fbtn:focus:not(:disabled) {
  border-color: rgba(110,200,210,.26);
  color: #5eeaff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(110,200,210,.26), 0 0 18px rgba(34,211,238,.18);
}
.dmep-uc-fbtn:active:not(:disabled) { transform: none; }
.dmep-uc-fbtn:disabled {
  opacity: .7;
  cursor: default;
}

/* Untergeordnete Aktion (z. B. "Zuruecknehmen") - dezenter. */
.dmep-uc-fbtn-sub {
  flex: 0 0 auto;
  background: transparent;
  border-color: rgba(110,200,210,.13);
  color: #7e949c !important;
  font-weight: 600;
}
.dmep-uc-fbtn-sub:hover:not(:disabled),
.dmep-uc-fbtn-sub:focus:not(:disabled) {
  background: rgba(110,200,210,.05);
  color: #d6e4e8 !important;
}

/* Bestaetigt/Freunde - Teal/Lime. */
.dmep-uc-fbtn-ok {
  background: rgba(45,212,191,.14);
  border-color: rgba(45,212,191,.4);
  color: #5eead4 !important;
}
.dmep-uc-fbtn-ok:hover:not(:disabled),
.dmep-uc-fbtn-ok:focus:not(:disabled) {
  background: rgba(45,212,191,.24);
  border-color: rgba(45,212,191,.6);
  color: #99f6e4 !important;
}
.dmep-uc-fbtn-ok:disabled {
  background: rgba(45,212,191,.12);
  border-color: rgba(45,212,191,.3);
  color: #5eead4 !important;
  opacity: 1;
}

/* Entfernen/Ablehnen - dezent rosa. */
.dmep-uc-fbtn-danger {
  flex: 0 0 auto;
  background: transparent;
  border-color: rgba(251,113,133,.35);
  color: #fb7185 !important;
}
.dmep-uc-fbtn-danger:hover:not(:disabled),
.dmep-uc-fbtn-danger:focus:not(:disabled) {
  background: rgba(251,113,133,.14);
  border-color: rgba(251,113,133,.55);
  color: #fda4af !important;
}

/* Inline-Fehlermeldung. */
.dmep-uc-ferr {
  flex: 1 0 100%;
  font-size: 11px;
  font-weight: 600;
  color: #fb7185;
  margin-top: 2px;
}

/* ---- Back-Link (Read-only Profil-Seite) ---- */
.dmep-back-bar {
  padding: 8px 0 4px;
}
.dmep-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #7e949c;
  text-decoration: none;
  transition: color .15s;
}
.dmep-back-link:hover { color: #22d3ee; }
.dmep-back-link svg { flex-shrink: 0; }

/* ---- Verlinkter Spielername (.dmep-userlink) + Hover-Hinweis "zum Profil >>" ---- */
.dmep-userlink { cursor: pointer; position: relative; text-decoration: none; transition: color .12s, text-shadow .12s; }
.dmep-userlink:hover { text-decoration: underline; text-underline-offset: 2px; }
.dmep-userlink::after {
  content: "zum Profil \00BB";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 5px);
  white-space: nowrap;
  background: rgba(10,17,22,.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #5eeaff;
  border: 1px solid rgba(110,200,210,.26);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 18px rgba(34,211,238,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 100002;
}
.dmep-userlink:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dmep-userlink::after { transition: none; } }

/* ===================== MOBILE RESPONSIVE ===================== */

/* ---------- 420 px — sehr kleine Phones ---------- */
@media (max-width: 420px) {

  /* Karte: bereits max-width: calc(100vw - 24px).
     Innenabstand reduzieren fuer mehr Nutzflaeche. */
  .dmep-uc-head { padding: 12px 12px 10px; gap: 10px; }
  .dmep-uc-foot { padding: 8px 12px; }

  /* Avatar etwas kleiner */
  .dmep-uc-ava,
  .dmep-uc-ava-ph { width: 44px; height: 44px; font-size: 18px; }

  /* Name: Overflow verhindern */
  .dmep-uc-name { font-size: 14px; }

  /* Stats-Grid: 3 Spalten behalten, Schrift und Padding reduzieren */
  .dmep-uc-stats { padding: 8px 10px 10px; }
  .dmep-uc-stat { padding: 4px 2px; }
  .dmep-uc-sv { font-size: 14px; }
  .dmep-uc-sk { font-size: 9px; }

  /* Tags enger */
  .dmep-uc-tag { font-size: 9px; padding: 2px 5px; }
}

/* Tooltip "zum Profil": auf Touch-Geraeten nie angezeigt (kein hover),
   aber sicherheitshalber sicherstellen, dass er nie horizontal ueberlaeuft.
   white-space:nowrap ist OK fuer diesen kurzen Text; left/transform zentrieren
   ihn relativ zum Elternelement — falls das am Rand sitzt, clamp mit max-width. */
@media (max-width: 600px) {
  .dmep-userlink::after {
    /* Tooltip bleibt unsichtbar auf Touch — wird nie per hover getriggert.
       Trotzdem: verhindert Layout-Overflow falls der Text ausserhalb des
       Kartencontainers landen wuerde. */
    max-width: calc(100vw - 32px);
    left: auto;
    right: 0;
    transform: translateY(5px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}