/* Hx-Komponenten. Anatomie aus Aethon.Components, Farben aus den Token-Aliasen. */

/* --- Button --- */
.hx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1;
    border: 1px solid var(--border-default); border-radius: var(--radius);
    background: var(--bg-elevated); color: var(--text-primary);
    cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
    margin: 0; touch-action: manipulation;
    transition: background var(--duration-default) var(--ease-default), color var(--duration-default) var(--ease-default),
                border-color var(--duration-default) var(--ease-default), box-shadow var(--duration-default) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
}
.hx-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); }
.hx-btn:active:not(:disabled) { transform: scale(.98); }
.hx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-glow-sm); border-color: var(--primary); }
.hx-btn:disabled { opacity: .45; cursor: not-allowed; }
.hx-btn-sm { padding: var(--space-1) var(--space-3); font-size: 12.5px; height: 32px; border-radius: var(--radius-sm); }
.hx-btn-md { padding: var(--space-2) var(--space-4); font-size: 14px; height: 42px; }
.hx-btn-lg { padding: var(--space-3) var(--space-6); font-size: 16px; height: 50px; border-radius: var(--radius-md); }
.hx-btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; box-shadow: 0 0 0 0 var(--primary-glow); }
.hx-btn-primary:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); filter: brightness(1.08); box-shadow: 0 6px 18px var(--primary-glow); }
.hx-btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.hx-btn-ghost:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text-primary); border-color: transparent; }
.hx-btn-danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.hx-btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.hx-btn-block { display: flex; width: 100%; }
.hx-btn .hx-icon { flex: 0 0 auto; }
.hx-btn-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: hx-spin .7s linear infinite;
}
@keyframes hx-spin { to { transform: rotate(360deg); } }

/* --- Card --- */
.hx-card {
    background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-default) var(--ease-default), box-shadow var(--duration-default) var(--ease-default), transform var(--duration-default) var(--ease-default);
}
.hx-card-hover:hover { border-color: var(--primary-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hx-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.hx-card-head h2, .hx-card-head h3 { margin: 0; }
.hx-card-head .hx-card-actions { margin-left: auto; display: flex; gap: var(--space-2); }
.hx-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.hx-card-sub { color: var(--text-secondary); font-size: .85rem; margin-top: 2px; }

/* --- Badge --- */
.hx-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
    padding: 4px 8px; border-radius: var(--radius-full);
    background: var(--bg-overlay); color: var(--text-primary);
    border: 1px solid transparent; vertical-align: middle; white-space: nowrap;
}
.hx-badge .hx-icon { width: 12px; height: 12px; }
.hx-badge-primary { background: var(--primary-glow); color: var(--primary); border-color: var(--primary-border); }
.hx-badge-success { background: var(--success-bg); color: var(--success); }
.hx-badge-danger { background: var(--danger-bg); color: var(--danger); }
.hx-badge-warning { background: var(--warning-bg); color: var(--warning); }
.hx-badge-info { background: var(--info-bg); color: var(--info); }
.hx-badge-outline { background: transparent; border-color: var(--border-default); color: var(--text-secondary); }

/* --- Icon --- */
.hx-icon { width: 18px; height: 18px; display: inline-block; vertical-align: -.2em; flex: 0 0 auto; }
.hx-icon-sm { width: 14px; height: 14px; }
.hx-icon-lg { width: 24px; height: 24px; }
.hx-icon-xl { width: 40px; height: 40px; }

/* --- Stat --- */
.hx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.hx-stat {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
}
.hx-stat-value { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hx-stat-label { font-size: .72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.hx-stat-accent { border-color: var(--primary-border); background: linear-gradient(160deg, var(--primary-glow-sm), var(--bg-elevated)); }
.hx-stat-accent .hx-stat-value { color: var(--primary); }
.hx-stat .hx-icon { color: var(--text-secondary); margin-bottom: 4px; }

/* --- Empty state --- */
.hx-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
    padding: var(--space-6) var(--space-4); color: var(--text-secondary);
    border: 1px dashed var(--border-default); border-radius: var(--radius);
}
.hx-empty .hx-icon { width: 32px; height: 32px; color: var(--text-muted); }
.hx-empty-title { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }
.hx-empty p { margin: 0; font-size: .9rem; max-width: 34rem; }
.hx-empty-actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.hx-empty-compact { padding: var(--space-4); border: 0; align-items: flex-start; text-align: left; }

/* --- Modal --- */
.hx-modal-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: var(--space-4);
    animation: hx-fade var(--duration-default) var(--ease-out);
}
.hx-modal {
    width: min(440px, 100%); background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: var(--space-5);
    animation: hx-rise var(--duration-slow) var(--ease-default);
}
.hx-modal:focus:not(:focus-visible) { outline: none; }
.hx-modal h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 1.1rem; }
.hx-modal p { margin: 0 0 var(--space-4); color: var(--text-secondary); line-height: 1.5; }
.hx-modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
@keyframes hx-fade { from { opacity: 0; } }
@keyframes hx-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* --- Tabs --- */
.hx-tabs { display: flex; gap: var(--space-1); padding: 3px; border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--space-4); }
.hx-tabs::-webkit-scrollbar { display: none; }
.hx-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600;
    color: var(--text-secondary); text-decoration: none; white-space: nowrap; border: 0; background: transparent; cursor: pointer;
    font-family: var(--font-body); margin: 0; min-height: 0;
    transition: background var(--duration-default) var(--ease-default), color var(--duration-default) var(--ease-default);
}
.hx-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.hx-tab.active { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.hx-tab img { width: 16px; height: 16px; border-radius: 4px; }

/* --- Chat --- */
.hx-chat { display: flex; flex-direction: column; gap: var(--space-2); }
.hx-chat-log { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 4px; font-size: .9rem; overscroll-behavior: contain; }
.hx-chat-empty { color: var(--text-secondary); font-size: .85rem; padding: var(--space-2) 0; }
.hx-chat-line { display: grid; grid-template-columns: auto 1fr auto auto; gap: 2px 6px; align-items: end; max-width: 92%; }
.hx-chat-line.mine { align-self: flex-end; grid-template-columns: auto 1fr auto; }
.hx-chat-line.mine .hx-chat-who { display: none; }
.hx-chat-who { grid-column: 1 / -1; font-size: .7rem; font-weight: 600; color: var(--text-secondary); }
.hx-chat-bubble {
    padding: 6px 10px; border-radius: 12px 12px 12px 4px;
    background: var(--bg-elevated); color: var(--text-primary); white-space: pre-wrap; word-break: break-word; line-height: 1.35;
}
.hx-chat-line.mine .hx-chat-bubble { background: var(--primary); color: var(--primary-ink); border-radius: 12px 12px 4px 12px; }
.hx-chat-line.emote .hx-chat-bubble { background: transparent; font-size: 1.4rem; padding: 0 4px; }
/* Hinweis des Raums (etwa: eine feste Farbe), ohne Absender: zurückgenommen, mittig, gestrichelt. */
.hx-chat-line.notice { align-self: center; max-width: 100%; grid-template-columns: 1fr auto; }
.hx-chat-line.notice .hx-chat-who { display: none; }
.hx-chat-line.notice .hx-chat-bubble { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-secondary); font-size: .82rem; font-style: italic; }
.hx-chat-when { font-size: .68rem; color: var(--text-secondary); white-space: nowrap; }
.hx-chat-report { margin: 0; min-height: 0; padding: 2px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; opacity: .6; }
.hx-chat-report:hover { color: var(--danger); opacity: 1; }
.hx-chat-row { display: flex; gap: var(--space-2); align-items: center; }
.hx-chat-row input { flex: 1 1 auto; max-width: none; margin: 0; min-height: 40px; }
.hx-chat-row .hx-btn { flex: 0 0 auto; }

/* --- Präsenz --- */
.hx-presence { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }
.hx-presence-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 2px var(--bg-surface); }
.hx-presence-online .hx-presence-dot { background: var(--success); box-shadow: 0 0 0 2px var(--bg-surface), 0 0 8px var(--success); }
.hx-presence-ingame .hx-presence-dot { background: var(--info); box-shadow: 0 0 0 2px var(--bg-surface), 0 0 8px var(--info); }
.hx-presence-online, .hx-presence-ingame { color: var(--text-primary); }

/* --- Toast: Einblendung oben --- */
.hx-toast {
    position: fixed; top: calc(3.4rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
    z-index: 60; width: min(520px, calc(100% - 1.2rem));
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--primary-border); border-left: 4px solid var(--primary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    animation: hx-drop var(--duration-slow) var(--ease-default);
}
.hx-toast > .hx-icon { color: var(--primary); margin-top: 2px; }
.hx-toast-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hx-toast-title { font-family: var(--font-display); font-weight: 700; }
.hx-toast-text { font-size: .9rem; color: var(--text-secondary); line-height: 1.4; }
.hx-toast-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 4px; }
.hx-toast-actions .hx-btn, .hx-toast-actions button { margin: 0; }
.hx-toast-close { margin: 0; min-height: 0; padding: 4px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.hx-toast-success { border-left-color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.hx-toast-success > .hx-icon { color: var(--success); }
.hx-toast-warning { border-left-color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.hx-toast-warning > .hx-icon { color: var(--warning); }
@keyframes hx-drop { from { opacity: 0; transform: translate(-50%, -12px); } }

/* --- Moment: Vollbild-Overlay --- */
.hx-moment {
    position: fixed; inset: 0; z-index: 80;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
    background: rgba(8, 6, 5, .96); color: #fff; cursor: pointer;
    animation: hx-fade var(--duration-slower) var(--ease-out);
}
.hx-moment-light { background: rgba(233, 220, 195, .97); color: #14100E; }
.hx-moment-body { max-width: min(960px, 100%); padding: var(--space-4); }
.hx-moment-hint { font-size: .75rem; opacity: .55; letter-spacing: .08em; text-transform: uppercase; }

/* --- Sheet --- */
.hx-sheet { display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.hx-sheet-handle { display: none; }
.hx-sheet-body { padding: var(--space-3); }
@media (max-width: 719.98px) {
    .hx-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
        box-shadow: var(--shadow-lg);
        transform: translateY(calc(100% - 48px));
        transition: transform var(--duration-slow) var(--ease-default);
        max-height: 80vh;
    }
    .hx-sheet.open { transform: translateY(0); }
    .hx-sheet-handle {
        display: flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-4);
        margin: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-family: var(--font-display); font-weight: 700;
    }
    .hx-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin-right: var(--space-2); }
    .hx-sheet-body { overflow-y: auto; max-height: calc(80vh - 48px); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
}

/* --- Countdown --- */
.hx-countdown { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 600; }
.hx-countdown-urgent { color: var(--danger, #b3261e); animation: hx-countdown-blink 1s steps(2, end) infinite; }
@keyframes hx-countdown-blink { 50% { opacity: .55; } }

/* --- Spielername: Farbchip, Avatar (Farbwahl) ---
   Die Sitzfarbe steht nie als Schrift auf der Fläche, nur als Chip oder Avatar; auf hellen Flächen hält der Rand sie
   sichtbar. Alle Farben der Palette sind hell, deshalb ist die Schrift auf einem Avatar dunkel (--hx-seat-ink). */
.hx-name { display: inline-flex; align-items: center; gap: .4em; min-width: 0; max-width: 100%; vertical-align: middle; }
.hx-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-chip {
    flex: none; display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: middle;
    background: var(--hx-seat, var(--text-secondary));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #000) 45%, transparent);
}
.hx-avatar {
    flex: none; position: relative; display: inline-grid; place-items: center;
    width: 2em; height: 2em; border-radius: 50%;
    font: 800 .8em/1 var(--font-display, inherit); color: var(--hx-seat-ink, #12141a);
    background: var(--hx-seat, var(--surface-3, #c9c9c9));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #000) 35%, transparent);
}
.hx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Farbwahl in der Lobby: ein Knopf je Farbe, vergebene sind gesperrt, die eigene hat einen Ring. */
.hx-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.hx-swatch {
    position: relative; flex: none; width: 40px; height: 40px; min-height: 0; min-width: 0; border-radius: 50%; padding: 0; margin: 0;
    cursor: pointer; background: var(--hx-seat); border: 0; touch-action: manipulation;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #000) 40%, transparent);
    transition: transform var(--duration-fast, .1s) var(--ease-default, ease);
}
/* Die Knopf-Regeln der Plattform (Mindesthöhe, Hover-Fläche) dürfen die Farbe nicht überdecken. */
.hx-swatch:hover:not(:disabled), .hx-swatch:active:not(:disabled) { transform: scale(1.08); background: var(--hx-seat); }
.hx-swatch:focus-visible { outline: 3px solid var(--primary, #4fc3dd); outline-offset: 3px; }
.hx-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg-surface, #fff), 0 0 0 5px var(--ink, #000); }
.hx-swatch:disabled { cursor: not-allowed; opacity: .35; }
.hx-swatch:disabled::after {
    content: ""; position: absolute; inset: 45% 4px; border-radius: 2px;
    background: var(--hx-seat-ink, #12141a); transform: rotate(-45deg);
}

/* --- Admin-Glow ---
   Auffällig, aber billig: animiert werden nur transform und opacity (läuft auf dem Compositor, auch am Handy flüssig),
   Schatten, Verläufe und Unschärfe stehen still. Die Schriftfarbe bleibt die der Fläche, damit der Name auf hellen und
   dunklen Themes lesbar bleibt. Funken und Flammen sind gezeichnet, keine Schrift, keine Bilder.
   Aussehen aus dem Konto des Admins (vom Server, GlowLook): Stil (hx-glow-puls, -neon, -feuer, -lauf, -funkeln, -ruhig),
   Stärke (hx-glow-dezent, -kraeftig, -krass) und Farbe: die Variablen --hx-glow-a bis -e setzt die Klasse des Kontos
   (GlowSheet) oder, in der Vorschau, ein umgebendes Element. Ohne sie: Gold, Pink, Himmelblau, Grün, Rot.
   prefers-reduced-motion: dasselbe Bild ohne Bewegung. */
.hx-glow, .hx-glow-ring {
    --g-a: var(--hx-glow-a, #ffd166); --g-b: var(--hx-glow-b, #ff5ac8); --g-c: var(--hx-glow-c, #5cc8ff);
    --g-d: var(--hx-glow-d, #5bd36b); --g-e: var(--hx-glow-e, #ff5a5f);
    --g-k: var(--hx-glow-k, 1); --g-p: var(--hx-glow-p, 70%); --g-q: var(--hx-glow-q, 45%); --g-o: var(--hx-glow-o, .7);
}
.hx-glow-dezent { --hx-glow-k: .7; --hx-glow-p: 45%; --hx-glow-q: 22%; --hx-glow-o: .45; }
.hx-glow-kraeftig { --hx-glow-k: 1; --hx-glow-p: 70%; --hx-glow-q: 45%; --hx-glow-o: .7; }
.hx-glow-krass { --hx-glow-k: 1.4; --hx-glow-p: 92%; --hx-glow-q: 70%; --hx-glow-o: .95; }

.hx-glow {
    position: relative; isolation: isolate; font-weight: 700;
    text-shadow: 0 0 calc(.2em * var(--g-k)) color-mix(in srgb, var(--g-a) 95%, transparent),
                 0 0 calc(.55em * var(--g-k)) color-mix(in srgb, var(--g-a) var(--g-p), transparent),
                 0 0 calc(1.1em * var(--g-k)) color-mix(in srgb, var(--g-b) var(--g-q), transparent);
}
/* Ein stehender Farbstrich unter dem Namen. */
.hx-glow .hx-name-text, .hx-glow.pname, .hx-glow:not(.hx-name) {
    background: linear-gradient(90deg, var(--g-a), var(--g-b), var(--g-c)) left bottom / 100% calc(2px * var(--g-k)) no-repeat;
    padding-bottom: 2px;
}
/* Der Name kürzt mit overflow:hidden (Auslassungspunkte); ohne Platz schnitte das den Schein hart ab. Innenabstand gibt
   ihm Raum, der negative Rand hält das Layout, der Strich bleibt unter der Schrift. */
.hx-glow .hx-name-text {
    padding: .45em .6em; margin: -.45em -.6em;
    background-origin: content-box; background-clip: padding-box; background-position: left 0 bottom -3px;
}
/* Puls (Standard): die Aura atmet, ein Funke blitzt. */
.hx-glow::before {
    content: ""; position: absolute; inset: calc(-.55em * var(--g-k)) calc(-.9em * var(--g-k)); z-index: -1;
    border-radius: 999px; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--g-a) var(--g-p), transparent),
                color-mix(in srgb, var(--g-b) var(--g-q), transparent) 60%, transparent);
    animation: hx-glow-breathe 2.6s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
.hx-glow::after {
    content: ""; position: absolute; top: -.55em; right: -.7em; pointer-events: none;
    width: calc(.9em * var(--g-k)); height: calc(.9em * var(--g-k));
    background: linear-gradient(135deg, #fff, var(--g-a) 55%, var(--g-b));
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: hx-glow-twinkle 1.9s ease-in-out infinite;
    will-change: transform, opacity;
}
.hx-glow.hx-glow-dezent:is(.hx-glow-puls, .hx-glow-lauf, .hx-glow-ruhig)::after { display: none; }
.hx-glow .hx-chip, .hx-glow .hx-avatar, .hx-glow-ring {
    box-shadow: 0 0 0 calc(2px * var(--g-k)) var(--g-a),
                0 0 calc(.6em * var(--g-k)) calc(.2em * var(--g-k)) color-mix(in srgb, var(--g-a) 85%, transparent),
                0 0 calc(1.4em * var(--g-k)) calc(.45em * var(--g-k)) color-mix(in srgb, var(--g-b) 60%, transparent);
}
.hx-glow .hx-chip { position: relative; }
.hx-glow .hx-chip::before, .hx-glow .hx-avatar::before {
    content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 50%; pointer-events: none;
    background: conic-gradient(var(--g-a), var(--g-b), var(--g-c), var(--g-a));
    animation: hx-spin 2.4s linear infinite;
    will-change: transform;
}

/* Neon-Flackern: harte Leuchtröhre, die Aura und ein Röhrenstrich flackern wie mit Wackelkontakt. */
.hx-glow.hx-glow-neon {
    text-shadow: 0 0 calc(.06em * var(--g-k)) #fff, 0 0 calc(.22em * var(--g-k)) var(--g-a),
                 0 0 calc(.6em * var(--g-k)) var(--g-a), 0 0 calc(1.3em * var(--g-k)) color-mix(in srgb, var(--g-b) var(--g-p), transparent);
}
.hx-glow.hx-glow-neon .hx-name-text, .hx-glow.hx-glow-neon:not(.hx-name) { background: none; }
.hx-glow.hx-glow-neon::before {
    background: radial-gradient(closest-side, color-mix(in srgb, var(--g-a) var(--g-p), transparent), transparent 75%);
    animation: hx-glow-flicker 4.2s steps(1, end) infinite;
}
.hx-glow.hx-glow-neon::after {
    top: auto; right: 0; left: 0; bottom: -.3em; width: auto; height: calc(2px * var(--g-k) + 1px); clip-path: none;
    border-radius: 2px; background: var(--g-a);
    box-shadow: 0 0 calc(6px * var(--g-k)) var(--g-a), 0 0 calc(14px * var(--g-k)) var(--g-b);
    animation: hx-glow-flicker 4.2s steps(1, end) infinite -1.3s;
}
.hx-glow.hx-glow-neon .hx-chip::before, .hx-glow.hx-glow-neon .hx-avatar::before {
    background: var(--g-a); animation: hx-glow-flicker 4.2s steps(1, end) infinite;
}

/* Feuer: zwei Flammenzungen, die von unten am Namen lodern. */
.hx-glow.hx-glow-feuer::before {
    inset: auto calc(-.35em * var(--g-k)) -.3em; height: calc(2.5em * var(--g-k));
    border-radius: 50% 50% 22% 22% / 80% 80% 20% 20%;
    background: radial-gradient(ellipse 58% 88% at 50% 100%, var(--g-a) 0%,
                color-mix(in srgb, var(--g-e) 85%, transparent) 30%,
                color-mix(in srgb, var(--g-b) var(--g-p), transparent) 55%, transparent 76%);
    filter: blur(calc(1.5px * var(--g-k)));
    transform-origin: 50% 100%;
    animation: hx-glow-flame 1.1s ease-in-out infinite alternate;
}
.hx-glow.hx-glow-feuer::after {
    top: auto; right: auto; left: 22%; bottom: -.1em; width: 56%; height: calc(1.6em * var(--g-k)); clip-path: none;
    border-radius: 50% 50% 30% 30% / 80% 80% 20% 20%;
    background: radial-gradient(ellipse 50% 85% at 50% 100%, #fff3b0 0%, var(--g-a) 25%,
                color-mix(in srgb, var(--g-e) var(--g-p), transparent) 55%, transparent 78%);
    transform-origin: 50% 100%;
    animation: hx-glow-flame-tip .8s ease-in-out infinite alternate;
}
.hx-glow.hx-glow-feuer .hx-chip::before, .hx-glow.hx-glow-feuer .hx-avatar::before {
    background: conic-gradient(var(--g-a), var(--g-e), var(--g-b), var(--g-a)); animation-duration: 1.2s;
}

/* Regenbogen-Lauf: ein Farbkreis, flach gedrückt, dreht sich hinter dem Namen; die Farben laufen um ihn herum. */
.hx-glow.hx-glow-lauf::before {
    inset: auto; left: 50%; top: 50%; width: calc(100% + 2.4em * var(--g-k)); aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(var(--g-a), var(--g-b), var(--g-c), var(--g-d), var(--g-e), var(--g-a));
    filter: blur(calc(7px * var(--g-k)));
    opacity: var(--g-o);
    transform: translate(-50%, -50%) scaleY(.3) rotate(0turn);
    animation: hx-glow-orbit 3.2s linear infinite;
    will-change: transform;
}
.hx-glow.hx-glow-lauf .hx-name-text, .hx-glow.hx-glow-lauf:not(.hx-name) {
    background-image: linear-gradient(90deg, var(--g-a), var(--g-b), var(--g-c), var(--g-d), var(--g-e));
}

/* Sternenstaub: zwei Schichten Funken rundum, die im Wechsel glitzern. */
.hx-glow.hx-glow-funkeln::before, .hx-glow.hx-glow-funkeln::after {
    inset: calc(-.65em * var(--g-k)) calc(-.85em * var(--g-k)); top: calc(-.65em * var(--g-k)); right: calc(-.85em * var(--g-k));
    width: auto; height: auto; clip-path: none; border-radius: 0;
    animation: hx-glow-sparkle 1.7s ease-in-out infinite;
}
.hx-glow.hx-glow-funkeln::before {
    background:
        radial-gradient(circle at 6% 30%, #fff 0 1.3px, transparent 2.2px),
        radial-gradient(circle at 24% 88%, var(--g-a) 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 47% 6%, var(--g-c) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 72% 94%, #fff 0 1.3px, transparent 2.2px),
        radial-gradient(circle at 90% 18%, var(--g-b) 0 1.7px, transparent 2.7px),
        radial-gradient(circle at 98% 66%, var(--g-a) 0 1.3px, transparent 2.2px),
        radial-gradient(closest-side, color-mix(in srgb, var(--g-a) var(--g-q), transparent), transparent);
}
.hx-glow.hx-glow-funkeln::after {
    background:
        radial-gradient(circle at 14% 8%, var(--g-b) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 36% 96%, #fff 0 1.2px, transparent 2px),
        radial-gradient(circle at 60% 4%, var(--g-a) 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 82% 90%, var(--g-c) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 2% 74%, var(--g-c) 0 1.2px, transparent 2px),
        radial-gradient(circle at 94% 42%, #fff 0 1.5px, transparent 2.5px);
    animation-delay: -.85s;
}

/* Ruhig: leuchtet, ohne sich zu bewegen (wie alle Stile bei reduzierter Bewegung). */
.hx-glow.hx-glow-ruhig::before, .hx-glow.hx-glow-ruhig::after,
.hx-glow.hx-glow-ruhig .hx-chip::before, .hx-glow.hx-glow-ruhig .hx-avatar::before { animation: none; }

@keyframes hx-glow-breathe { from { transform: scale(.88); opacity: .55; } to { transform: scale(1.1); opacity: 1; } }
@keyframes hx-glow-twinkle {
    0%, 100% { transform: scale(.35) rotate(0deg); opacity: .25; }
    50% { transform: scale(1) rotate(90deg); opacity: 1; }
}
@keyframes hx-glow-flicker {
    0%, 17%, 21%, 24%, 52%, 56%, 100% { opacity: 1; }
    18%, 22%, 53% { opacity: .12; }
    23% { opacity: .55; }
}
@keyframes hx-glow-flame {
    0% { transform: scale(1, .82) skewX(-3deg); opacity: .8; }
    50% { transform: scale(.95, 1.08) skewX(2deg); opacity: 1; }
    100% { transform: scale(1.04, .9) skewX(-1deg); opacity: .88; }
}
@keyframes hx-glow-flame-tip {
    0% { transform: translateY(0) scale(1, .88); opacity: .65; }
    100% { transform: translateY(-.18em) scale(.82, 1.16); opacity: 1; }
}
@keyframes hx-glow-orbit {
    from { transform: translate(-50%, -50%) scaleY(.3) rotate(0turn); }
    to { transform: translate(-50%, -50%) scaleY(.3) rotate(1turn); }
}
@keyframes hx-glow-sparkle { 0%, 100% { opacity: .12; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
    /* !important, weil die Stile ihre Animation mit spezifischeren Regeln setzen; hier soll ausnahmslos alles stehen. */
    .hx-glow::before, .hx-glow::after, .hx-glow .hx-chip::before, .hx-glow .hx-avatar::before { animation: none !important; }
    .hx-glow:is(.hx-glow-puls, .hx-glow-lauf)::after, .hx-glow:not([class*="hx-glow-"])::after { transform: none; opacity: .9; }
}