/* ==========================================================================
   NOTIFICATION SYSTEM
   Refactored CSS for better maintainability and coherence.
   Sections:
   1. Design Tokens (Variables)
   2. Layout & Keyframes
   3. Base Components
   4. Theme Variants (States)
   5. Interaction & Extras
   ========================================================================== */

:root {
  /* --- Colors --- */
  --notification-clr-primary: #1464c8;
  --notification-clr-secondary: #00b4a0;
  --notification-clr-winner-start: #ffd700;
  --notification-clr-winner-end: #daa520;
  --notification-clr-loser-start: #e0e0e0;
  --notification-clr-loser-end: #a0a0a0;

  /* Neutrals & Opacity Layers */
  --notification-white: #fff;
  --notification-black: #000;
  --notification-white-10: rgb(255 255 255 / 10%);
  --notification-white-15: rgb(255 255 255 / 15%);
  --notification-white-20: rgb(255 255 255 / 20%);
  --notification-white-25: rgb(255 255 255 / 25%);
  --notification-white-30: rgb(255 255 255 / 30%);
  --notification-white-40: rgb(255 255 255 / 40%);
  --notification-white-50: rgb(255 255 255 / 50%);
  --notification-white-60: rgb(255 255 255 / 60%);
  --notification-white-90: rgb(255 255 255 / 90%);
  --notification-black-05: rgb(0 0 0 / 5%);
  --notification-black-10: rgb(0 0 0 / 10%);
  --notification-black-15: rgb(0 0 0 / 15%);
  --notification-black-20: rgb(0 0 0 / 20%);
  --notification-black-30: rgb(0 0 0 / 30%);
  --notification-black-40: rgb(0 0 0 / 40%);

  /* --- Spacing (4px based) --- */
  --notification-space-1: 4px;
  --notification-space-2: 8px;
  --notification-space-3: 12px;
  --notification-space-4: 16px;
  --notification-space-5: 20px;
  --notification-space-6: 24px;
  --notification-space-8: 32px;
  --notification-space-10: 40px;
  --notification-space-12: 48px;

  /* --- Typography --- */
  --notification-font-family: var(--font-family-primary);
  --notification-size-xs: 12px;
  --notification-size-s: 16px;
  --notification-size-m: 16px;
  --notification-size-l: 16px;
  --notification-size-xl: 16px;
  --notification-weight-normal: 400;
  --notification-weight-semi: 600;
  --notification-weight-bold: 700;
  --notification-weight-heavy: 800;

  /* --- Radii --- */
  --notification-radius-s: 4px;
  --notification-radius-m: 8px;
  --notification-radius-l: 12px;
  --notification-radius-full: 9999px;

  /* --- Shadows --- */
  --notification-shadow-sm: 0 2px 8px var(--notification-black-15);
  --notification-shadow-md: 0 8px 24px var(--notification-black-20);
  --notification-shadow-lg: 0 15px 40px var(--notification-black-30);
  --notification-shadow-glow: 0 0 16px var(--notification-white-20);

  /* --- Animations --- */
  --notification-dur-fast: 0.2s;
  --notification-dur-main: 0.3s;
  --notification-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --notification-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* --- Semantic Tokens (Default) --- */
  --notification-bg: var(--notification-clr-primary);
  --notification-bg-gradient: linear-gradient(
    135deg,
    var(--notification-clr-primary) 0%,
    var(--notification-clr-secondary) 100%
  );
  --notification-border-clr: var(--notification-white-40);
  --notification-text-clr-main: var(--notification-white);
  --notification-text-clr-sub: var(--notification-white-90);
  --notification-text-clr-inv: var(--notification-black);
  --notification-score-bg: var(--notification-black-15);
  --notification-score-border: var(--notification-white-10);
  --notification-score-label-clr: var(--notification-white-60);
  --notification-score-value-clr: var(--notification-white);
}

/* ==========================================================================
   2. Layout & Keyframes
   ========================================================================== */

#notificationOverlay {
  position: absolute;
  top: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 1000;
}

#notification {
  font-family: var(--notification-font-family);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--notification-space-3); /* Exactly half of previous 24px */
  user-select: none;
  filter: drop-shadow(var(--notification-shadow-lg));
  pointer-events: auto;
}

@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes notificationFoldDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    max-height: 40px;
    transform: translateY(0);
  }
}

/* ==========================================================================
   3. Base Components
   ========================================================================== */

/* 3.1 Banner */
.notification-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--notification-radius-m);
  background: var(--notification-bg-gradient);
  border: 1px solid var(--notification-border-clr);
  box-shadow: var(--notification-shadow-md);
}

/* 3.3 Content Structure */
.notification-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.notification-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--notification-space-2); /* Reduced gap */
  width: 100%;
  padding: var(--notification-space-1) var(--notification-space-4); /* Tight padding */
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem; /* Slightly smaller icon */
}

.notification-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.notification-title {
  margin: 0;
  color: var(--notification-text-clr-main);
  font-size: var(--notification-size-l);
  font-weight: var(--notification-weight-heavy);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.notification-subtext {
  margin: 0;
  color: var(--notification-text-clr-sub);
  font-size: var(--notification-size-m);
  font-weight: var(--notification-weight-semi);
  white-space: pre-wrap;
}

.notification-subtext-light {
  font-weight: var(--notification-weight-normal);
  opacity: 0.85;
}

/* 3.4 Match Score */
.notification-match-score {
  width: 100%;
  padding: var(--notification-space-1) var(--notification-space-6); /* Extremely tight vertical padding */
  background: var(--notification-score-bg);
  border-top: 1px solid var(--notification-score-border);
}

.notification-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--notification-space-1);
  width: 100%;
  padding: var(--notification-space-2) var(--notification-space-4)
    var(--notification-space-3);
  border-top: 1px solid var(--notification-score-border);
  background: rgb(0 0 0 / 9%);
}

.match-score-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.match-score-label {
  color: var(--notification-score-label-clr);
  font-size: var(--notification-size-xs);
  font-weight: var(--notification-weight-heavy);
  text-transform: uppercase;
}

.match-score-value {
  color: var(--notification-score-value-clr);
  font-size: var(--notification-size-m);
  font-weight: var(--notification-weight-bold);
  letter-spacing: 0.5px;
}

/* ==========================================================================
   4. Theme Variants (States)
   ========================================================================== */

/* 4.1 Winner State */
#notification.is-winner {
  --notification-bg: var(--notification-clr-winner-start);
  --notification-bg-gradient: linear-gradient(
    135deg,
    var(--notification-clr-winner-start) 0%,
    var(--notification-clr-winner-end) 100%
  );
  --notification-border-clr: var(--notification-white-60);
  --notification-text-clr-main: var(--notification-text-clr-inv);
  --notification-text-clr-sub: var(--notification-text-clr-inv);
  --notification-score-bg: var(--notification-black-05);
  --notification-score-border: var(--notification-black-10);
  --notification-score-label-clr: rgb(0 0 0 / 50%);
  --notification-score-value-clr: var(--notification-text-clr-inv);
}

/* 4.2 Loser State */
#notification.is-loser {
  --notification-bg: var(--notification-clr-loser-start);
  --notification-bg-gradient: linear-gradient(
    135deg,
    var(--notification-clr-loser-start) 0%,
    var(--notification-clr-loser-end) 100%
  );
  --notification-border-clr: var(--notification-white-60);
  --notification-text-clr-main: var(--notification-text-clr-inv);
  --notification-text-clr-sub: var(--notification-text-clr-inv);
  --notification-score-bg: var(--notification-black-05);
  --notification-score-border: var(--notification-black-10);
  --notification-score-label-clr: rgb(0 0 0 / 50%);
  --notification-score-value-clr: var(--notification-text-clr-inv);
}

/* ==========================================================================
   5. Interaction & Extras
   ========================================================================== */

/* 5.1 Badge Style (Simple extra info) */
.notification-badge {
  display: inline-block;
  padding: var(--notification-space-1) var(--notification-space-4);
  color: var(--notification-white);
  font-size: var(--notification-size-xs);
  font-weight: var(--notification-weight-heavy);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--notification-white-25);
  border: 1px solid var(--notification-white-30);
  border-radius: var(--notification-radius-s);
  box-shadow: var(--notification-shadow-sm);
}

/* 5.2 High Breaks */
.notification-high-breaks {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 220px;
}

.notification-high-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 0;
  color: var(--notification-white);
  font-size: 12px;
  font-weight: var(--notification-weight-normal);
  font-family: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  animation: notificationFoldDown 1s ease-out forwards;
}

.notification-high-break:hover,
.notification-high-break:focus-visible {
  text-decoration: underline;
}

.notification-high-break-label {
  letter-spacing: 0.5px;
}

.notification-high-break-icon,
.notification-high-break-upload {
  color: var(--notification-white);
}

/* 5.3 Action Buttons */
.notification-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--notification-space-2);
  width: 100%;
}

.notification-actions button,
.notification-actions .button {
  display: inline-block;
  padding: var(--notification-space-1) var(--notification-space-2); /* 4px 8px */
  cursor: pointer;
  color: var(--notification-white);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--notification-size-m);
  font-weight: var(--notification-weight-bold);
  background: var(--notification-white-15);
  border: 1px solid var(--notification-white-30);
  border-radius: var(--notification-radius-s);
  box-shadow: var(--notification-shadow-sm);
  transition:
    transform var(--notification-dur-fast) var(--notification-ease-elastic),
    box-shadow var(--notification-dur-fast) var(--notification-ease-out),
    background var(--notification-dur-fast) var(--notification-ease-out);
}

.notification-actions button:hover,
.notification-actions .button:hover {
  background: var(--notification-white-25);
  border-color: var(--notification-white-50);
  box-shadow: var(--notification-shadow-md);
  transform: translateY(-4px) scale(1.05);
}

.notification-actions button:focus-visible,
.notification-actions .button:focus-visible {
  outline: 2px solid var(--notification-white);
  outline-offset: 4px;
  background: var(--notification-white-25);
}

#notification.is-winner .notification-actions button,
#notification.is-winner .notification-actions .button,
#notification.is-loser .notification-actions button,
#notification.is-loser .notification-actions .button {
  background: var(--notification-black-15);
  border-color: var(--notification-black-30);
}