/* Player Name History â Badge auf der Spielerkarte + Hover-Popup * NEU 2026-08-26. Geteilt zwischen /members.php und /mobile/members.php. * * Das Popup lebt bewusst NICHT in der Karte: .player-card hat overflow:hidden, * ein Kind-Element wuerde abgeschnitten. #nh-pop haengt an und wird per * position:fixed an der Badge ausgerichtet (siehe assets/js/name-history.js). */ /* --- Badge: unten links auf der Karte ------------------------------------- * Oben links sitzt die Monats-Tier-Badge, oben rechts der Growth-Kreis. * Unten links ist die einzige freie Ecke. */ .name-history-badge { position: absolute; left: 8px; bottom: 8px; z-index: 4; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(142, 207, 234, 0.10); border: 1px solid var(--border, rgba(142, 207, 234, 0.18)); color: var(--accent, #8ecfea); cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; } .name-history-badge:hover, .name-history-badge.nh-open { background: rgba(142, 207, 234, 0.22); border-color: var(--border2, rgba(142, 207, 234, 0.35)); transform: scale(1.12); } .name-history-badge svg { display: block; width: 14px; height: 14px; } /* Karte ohne erfassten Wechsel: leise, aber vorhanden. */ .name-history-badge.nh-empty { opacity: .35; } .name-history-badge.nh-empty:hover { opacity: .7; } /* Mit Historie: dezenter Gold-Akzent, damit umbenannte Spieler auffallen. */ .name-history-badge.nh-has { background: rgba(201, 162, 39, 0.14); border-color: rgba(201, 162, 39, 0.35); color: var(--gold, #c9a227); } .name-history-badge.nh-has:hover, .name-history-badge.nh-has.nh-open { background: rgba(201, 162, 39, 0.26); border-color: rgba(201, 162, 39, 0.55); } /* --- Popup ---------------------------------------------------------------- * z-index 190 liegt unter .profile-bg (200): ein geoeffnetes Profil-Modal * ueberdeckt das Popup sauber. */ #nh-pop { position: fixed; z-index: 190; display: none; max-width: 300px; min-width: 190px; padding: 10px 12px; background: #0d2233; border: 1px solid var(--border2, rgba(142, 207, 234, 0.35)); border-radius: 10px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); font-family: 'Rajdhani', sans-serif; font-size: 12px; color: var(--ice2, #c8eaf8); line-height: 1.45; text-align: left; pointer-events: none; /* Hover-Popup darf den Mauszeiger nicht abfangen */ } #nh-pop.nh-pinned { pointer-events: auto; } /* Tap-Modus: Inhalt anklickbar */ .nh-pop-title { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted, #7fa8bd); margin-bottom: 6px; } .nh-pop-current { font-weight: 700; color: var(--ice, #e6f6ff); word-break: break-word; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(142, 207, 234, 0.16); } .nh-pop-current span { display: block; font-size: 10px; font-weight: 400; letter-spacing: 1px; color: var(--muted, #7fa8bd); text-transform: uppercase; } .nh-pop-list { display: flex; flex-direction: column; gap: 7px; } .nh-pop-row { display: flex; flex-direction: column; } .nh-pop-names { word-break: break-word; } .nh-pop-old { color: var(--muted, #7fa8bd); text-decoration: line-through; } .nh-pop-arrow { color: rgba(142, 207, 234, 0.55); margin: 0 5px; } .nh-pop-new { color: var(--ice2, #c8eaf8); font-weight: 600; } .nh-pop-date { font-size: 10px; color: rgba(200, 232, 245, 0.35); letter-spacing: .5px; } .nh-pop-empty { color: var(--muted, #7fa8bd); font-style: italic; }