/* Lokale Einbindung der Expansiva-Schrift für das Logo */
@font-face {
    font-family: 'Expansiva';
    src: local('Expansiva'), local('Expansiva-Regular');
    font-display: swap;
}

:root {
    --primary-red: #d90429;
    --hover-red: #ef233c;
    --bg-light: #f8f9fa;
    --card-bg: #f0f2f5;
    --card-hover: #e4e7eb;
    --border-color: #e0e0e0;
    --text-dark: #1a1a1a;
    --text-muted: #6c757d;
    --accent-green: #37B700;
    --active-green: #37B700; 
    --club-color: #1F355C;
    --competition-league: #12233b;
    --competition-pokal: #185f34;
    --competition-friendly: #687386;
    --competition-tournament: #8a651f;
    --vsl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { 
    font-family: var(--vsl-font);
    background-color: var(--bg-light); 
    color: var(--text-dark); 
    margin: 0; 
    padding: 0; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header { 
    background: #ffffff; 
    padding: 12px 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: relative; 
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Universelles Logo-Styling für konsistente Darstellung in Firefox und Edge */
.logo, .top-nav .logo-area, header .logo, .brand-title {
    font-family: 'Expansiva', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1.5em !important;
    color: var(--primary-red, #cc0000) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.brand-container { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-title { line-height: 1; }
.brand-subtitle { font-size: 0.75em; color: var(--primary-red); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }

.nav-wrapper { display: flex; align-items: center; margin-right: 180px; }
nav { display: flex; gap: 40px; position: relative; z-index: 101; }

nav a, .nav-links a { 
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95em;
    color: #334155; 
    text-decoration: none; 
    transition: color 0.2s; 
    cursor: pointer; 
}
nav a.active, nav a:hover, .nav-links a:hover, .nav-links a.active { 
    color: #cc0000; 
}

.club-banner-strip {
    background-color: var(--club-color);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 90;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.club-banner-strip.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 105;
}

.banner-left-logo {
    position: absolute;
    left: 20px;
    height: 28px;
    width: auto;
    object-fit: contain;
}

.banner-club-name {
    font-size: 1.15em;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.user-sidebar { 
    position: fixed; 
    top: 10px; 
    right: 25px; 
    z-index: 999; 
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

.logo-home-wrapper {
    position: relative;
    display: inline-block;
    pointer-events: auto;
}

.logo-home-wrapper.logo-only-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-team-logo { 
    height: 155px; 
    width: auto; 
    object-fit: contain; 
    filter: drop-shadow(0px 6px 14px rgba(0,0,0,0.3)); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer; 
    display: block;
}

.user-sidebar.scrolled .user-team-logo {
    height: 155px;
    filter: drop-shadow(0px 6px 14px rgba(0,0,0,0.3));
}

.user-team-logo:hover { 
    transform: scale(1.06); 
}

.home-icon-btn {
    position: absolute;
    bottom: 0%;
    left: -10%;
    width: 22%;
    height: 22%;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
    z-index: 10;
}

.home-icon-btn:hover {
    transform: scale(1.2);
    color: var(--primary-red);
}

.home-icon-btn svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3));
}

.sidebar-widget {
    background: var(--club-bg-rgba, rgba(31, 53, 92, 0.90));
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    border-radius: 7px;
    pointer-events: auto;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.2s, background-color 0.2s, opacity 0.2s;
}

.widget-games {
    padding: 8px 15px;
    min-width: 120px;
    cursor: pointer;
}
.widget-games:hover {
    transform: scale(1.03);
}
.widget-games .label { font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.widget-games .value { font-size: 1.35em; font-weight: 700; margin: 3px 0; }
.widget-games .value-played {
    color: #4bd12f !important;
}

button, input, select, textarea { font-family:inherit; }
h1, h2, h3, h4 { font-family:inherit; text-wrap:balance; }
.competition-row{position:relative;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.035)}
.competition-row::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);pointer-events:none}
.auto-result-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;padding:2px 5px;border:1px solid #d69b22;border-radius:5px;background:#fff4cf;color:#744b00;font-size:.56rem;font-weight:950;line-height:1;letter-spacing:.55px;vertical-align:middle;white-space:nowrap;box-shadow:0 1px 3px rgba(116,75,0,.14)}
.widget-games .subtext { font-size: 0.72em; opacity: 0.85; font-weight: 500; }

.widget-pill {
    padding: 6px 12px;
    font-size: 0.9em;
    font-weight: 700;
    border-radius: 6px;
    min-width: 120px;
}
.pill-money {
    color: #39ff14 !important;
}
.pill-money-negative {
    color: var(--primary-red) !important;
}
.pill-xp .xp-val {
    color: #39ff14 !important;
    font-weight: 700;
}

.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
    margin-top: 4px;
}

.action-btn {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.action-btn:hover {
    transform: scale(1.08);
}

.action-btn.disabled-btn {
    background: #7f8c8d !important;
    opacity: 0.7;
    cursor: pointer;
}
.action-btn.disabled-btn:hover {
    transform: none;
}

.action-btn svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.btn-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: var(--primary-red);
    color: #ffffff !important;
    font-size: 0.8em;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.objectives-widget {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    width: auto;
    align-self: flex-end;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.objectives-widget.expanded {
    width: 350px;
    background: var(--club-color, #1f355c);
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.objectives-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    user-select: none;
    width: auto;
}

.objectives-widget.expanded .objectives-header {
    width: 100%;
    justify-content: space-between;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.objectives-title { display: none; font-size: 0.95em; font-weight: 700; color: inherit; }
.objectives-widget.expanded .objectives-title { display: inline; }

.target-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.objectives-widget.expanded .target-btn-container {
    flex-direction: row;
}

.target-ratio-text {
    font-size: 0.9em;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-top: 2px;
    display: block;
}

.target-ratio-text .done-num { color: var(--primary-red); }
.target-ratio-text .total-num { color: #111111 !important; font-weight: normal !important; }

.objectives-widget.expanded .target-ratio-text {
    display: none;
}

.badge-count-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.objectives-widget.expanded .badge-count-icon {
    width: auto;
    height: auto;
    background: transparent !important;
    box-shadow: none;
    border: none;
}

.objectives-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    width: 0;              
    pointer-events: none;  
    color: inherit;
}

.objectives-widget.expanded .objectives-body {
    max-height: 380px;
    opacity: 1;
    padding: 15px;
    width: 330px;
    pointer-events: auto;
}

.objective-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; line-height: 1.35; font-weight: 500; }
.objective-item:last-child { margin-bottom: 0; }
.objective-item input[type="checkbox"] { accent-color: var(--primary-red); margin-top: 3px; cursor: pointer; flex-shrink: 0; width: 16px; height: 16px; }
.objective-item span { word-break: break-word; }
.objective-item.completed span { text-decoration: line-through; opacity: 0.6; }
.objective-item .objective-system-state { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:#f5c84b; color:#172033; font-weight:950; text-decoration:none !important; opacity:1 !important; }
.objective-item.completed .objective-system-state { background:#43bd51; color:#fff; }
.objective-item.failed .objective-system-state { background:#e34b55; color:#fff; }
.objective-item > span:last-child { display:grid; gap:4px; }
.objective-item small { display:block; font-size:.72rem; line-height:1.35; opacity:.78; }

.large-menu-overlay {
    display: flex;
    position: fixed;
    top: calc(50% + 42px);
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(1200px, 85vw);
    height: min(750px, 80vh);
    background-color: var(--club-modal-bg, rgba(31, 53, 92, 0.97));
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    z-index: 950;
    overflow: hidden;
    flex-direction: column;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.28s;
}

.large-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.large-menu-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 65%;
    width: auto;
    object-fit: contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 1;
}

.large-menu-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.large-menu-header svg {
    width: 48px;
    height: 48px;
    fill: currentColor;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
}

.large-menu-content {
    position: relative;
    z-index: 2;
    padding: 20px 40px;
    flex-grow: 1;
    overflow-y: auto;
}

.match-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 15px;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
    color: inherit;
}

.match-row:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(1.005);
}

.match-team {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.match-team.home {
    justify-content: flex-end;
    text-align: right;
}

.match-team.away {
    justify-content: flex-start;
    text-align: left;
}

.team-block-content {
    display: flex;
    flex-direction: column;
}

.match-team.home .team-block-content {
    align-items: flex-end;
}

.match-team.away .team-block-content {
    align-items: flex-start;
}

.trainer-subinfo {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 0.8em;
    opacity: 0.85;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.active {
    background-color: var(--active-green);
}

.status-dot.inactive {
    background-color: var(--primary-red);
}

.team-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.team-name {
    font-weight: 600;
    font-size: 1.05em;
    letter-spacing: 0.3px;
}

.match-score {
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 15px;
    border-radius: 6px;
    font-size: 1.2em;
    font-weight: 800;
    min-width: 50px;
    text-align: center;
    margin: 0 15px;
    letter-spacing: 2px;
}

.widget-games .value div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.container { max-width: 1200px; margin: 30px auto; padding: 0 20px; }
h2 { color: var(--text-dark); border-bottom: none; padding-bottom: 8px; margin-top: 20px; display: inline-block; font-size: 1.3em; letter-spacing: 0.5px; font-weight: 700; }

.card, .box {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-dark) !important;
}

details summary::-webkit-details-marker {
    display: none;
}
details[open] summary {
    background: #f1f5f9;
}
details summary {
    transition: background 0.2s ease;
}
details > div {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.ea-circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 15px;
}

.ea-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.circular-progress {
    position: relative;
    width: 90px;
    height: 90px;
}

.circular-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circular-progress circle {
    fill: none;
    stroke-width: 8;
}

.circular-progress .bg-circle {
    stroke: rgba(255, 255, 255, 0.1);
}

.circular-progress .progress-circle {
    stroke: #00ffcc;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.circular-progress .percentage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.ea-stat-label {
    margin-top: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a0a0a0;
}
/* Saisonübergreifender Terminplaner-Marker für Trainerzuverlässigkeit */
.trainer-reliability {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}
.reliability-critical { color: #ff626d; background: rgba(220, 38, 38, .16); }
.reliability-low { color: #ff9a52; background: rgba(249, 115, 22, .16); }
.reliability-medium { color: #f6c84c; background: rgba(234, 179, 8, .16); }
.reliability-good { color: #78df85; background: rgba(34, 197, 94, .16); }
.reliability-excellent { color: #35e784; background: rgba(22, 163, 74, .20); }
.reliability-unrated { color: #b9c5d7; background: rgba(148, 163, 184, .15); }

.terminplaner-feedback-message {
    margin: -2px 0 15px;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: .88em;
    font-weight: 700;
    line-height: 1.35;
}
.terminplaner-feedback-message.error { color: #ffd0d5; background: rgba(220, 38, 38, .22); border: 1px solid rgba(255, 107, 107, .45); }
.terminplaner-feedback-message.warning { color: #ffe8a3; background: rgba(234, 179, 8, .18); border: 1px solid rgba(250, 204, 21, .40); }
.terminplaner-feedback-message.success { color: #b7f7c6; background: rgba(34, 197, 94, .16); border: 1px solid rgba(74, 222, 128, .38); }
.terminplaner-feedback-message.info { color: #bfdbfe; background: rgba(59, 130, 246, .16); border: 1px solid rgba(147, 197, 253, .35); }
/* XP-Ereignisse: positive Buchungen werden eingesammelt, Abzüge erklärt. */
.pill-xp { position: relative; overflow: visible !important; }
.xp-event-collector {
    position: absolute;
    right: -13px;
    top: -18px;
    min-width: 48px;
    height: 31px;
    padding: 0 9px;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 999px;
    color: #071426;
    font: 900 .78rem/1 Arial, sans-serif;
    cursor: pointer;
    z-index: 8;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    animation: xpCollectorAttention 1.45s ease-in-out infinite;
}
.xp-event-collector.is-positive { background: #6dff4a; }
.xp-event-collector.is-negative { background: #ff5252; color: #fff; }
.xp-event-collector:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.xp-event-collector[data-waiting]:not([data-waiting=""])::after { content:attr(data-waiting); position:absolute; right:-8px; top:-9px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 4px; border-radius:99px; background:#e51b3e; color:#fff; border:2px solid #fff; font-size:.62rem; font-weight:950; box-shadow:0 3px 8px rgba(0,0,0,.28); }
@keyframes xpCollectorAttention {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-5px) scale(1.06); }
}
.office-xp-value { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.office-effective-xp-hero {
    position: relative;
    margin: 0 0 14px;
    padding: 15px 18px;
    overflow: visible;
    border: 2px solid #15803d;
    border-radius: 13px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    text-align: center;
    box-shadow: 0 7px 20px rgba(21, 128, 61, .16);
}
.office-effective-xp-hero .office-xp-kicker { display:block; color:#334155; font-size:.76rem; font-weight:900; letter-spacing:.75px; text-transform:uppercase; }
.office-effective-xp-hero .office-xp-main { display:flex; align-items:baseline; justify-content:center; gap:7px; margin:3px 0; color:#15803d; font-size:2.25rem; font-weight:950; line-height:1.05; text-shadow:0 0 15px rgba(34,197,94,.24); }
.office-effective-xp-hero .office-xp-main small { font-size:.42em; }
.office-effective-xp-hero .office-xp-help { display:block; color:#475569; font-size:.72rem; font-weight:700; }
.office-effective-xp-hero.xp-status-warning { border-color:#d97706; background:linear-gradient(135deg,#fffbeb,#fef3c7); box-shadow:0 7px 20px rgba(217,119,6,.19); }
.office-effective-xp-hero.xp-status-warning .office-xp-main { color:#b45309; text-shadow:0 0 15px rgba(245,158,11,.25); }
.office-effective-xp-hero.xp-status-danger { border-color:#dc2626; background:linear-gradient(135deg,#fff1f2,#fee2e2); box-shadow:0 7px 20px rgba(220,38,38,.21); }
.office-effective-xp-hero.xp-status-danger .office-xp-main { color:#b91c1c; text-shadow:0 0 15px rgba(239,68,68,.25); }
.office-xp-breakdown { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.office-xp-breakdown > div { padding:8px 9px; border:1px solid #dbe4ef; border-radius:8px; background:#f8fafc; text-align:center; }
.office-xp-breakdown > div > span { display:block; min-height:2.1em; color:#64748b; font-size:.67rem; font-weight:750; line-height:1.2; }
.office-xp-breakdown strong { display:block; margin-top:3px; color:#0f172a; font-size:.92rem; white-space:nowrap; }
.office-xp-breakdown strong > span { display:inline; min-height:0; color:inherit; font:inherit; line-height:inherit; }
@media (max-width:680px) { .office-xp-breakdown { grid-template-columns:1fr; }.office-xp-breakdown span { min-height:0; } }
.office-xp-value .xp-event-collector {
    position: relative;
    right: auto;
    top: auto;
    margin-left: 9px;
    vertical-align: middle;
}
.office-xp-main .xp-event-collector { position:relative; inset:auto; margin-left:9px; vertical-align:middle; }
.xp-global-fallback { position: fixed; right: 22px; top: 92px; z-index: 99990; }
.xp-global-fallback .xp-event-collector { position: relative; inset: auto; }
.xp-event-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 10, 22, .78);
    backdrop-filter: blur(5px);
}
.xp-event-backdrop[hidden] { display: none !important; }
.xp-event-dialog {
    width: min(480px, 100%);
    padding: 28px;
    border: 1px solid rgba(255,92,92,.55);
    border-radius: 18px;
    background: linear-gradient(145deg, #172235, #0c1422);
    color: #fff;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.xp-event-dialog-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #ef4444;
    font-weight: 950;
    font-size: 1.2rem;
    box-shadow: 0 0 0 8px rgba(239,68,68,.14);
}
.xp-event-kicker { margin: 0 0 5px; color: #fca5a5; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.xp-event-dialog h2 { margin: 0; font-size: 2rem; color: #ff6b6b; }
.xp-event-reason { margin: 15px 0; color: #d7e0ee; line-height: 1.5; }
.xp-event-balance { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.xp-event-dialog button {
    margin-top: 10px;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-weight: 850;
    cursor: pointer;
}
.xp-value-pulse { animation: xpValuePulse .7s ease; }
@keyframes xpValuePulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.24); filter: brightness(1.8); }
    100% { transform: scale(1); }
}