@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 1920px;
  height: 1080px;
  background: transparent;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Animations ── */
@keyframes wIn {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.32); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ── Widget base ── */
.widget {
  position: absolute;
  background: rgba(6, 8, 16, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 18px 26px 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  animation: wIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 0.3s ease;
}

.widget-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.widget-visible {
  opacity: 1;
  transition: opacity 0.3s;
}
.widget-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  color: #fff;
  margin-bottom: 4px;
}

.widget-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
}

.widget-value.pop {
  animation: pop 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Deaths widget ── */
#w-deaths {
  top: 32px;
  left: 32px;
  min-width: 160px;
}

#deaths-value {
  color: #e8303a;
  text-shadow: 0 0 24px rgba(232, 48, 58, 0.6);
}

/* ── Progress widget ── */
#w-progress {
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  text-align: center;
}

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

#progress-current {
  color: #f5a623;
  text-shadow: 0 0 24px rgba(245, 166, 35, 0.6);
}

.widget-sep {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.widget-total {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
}

.progress-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  margin-top: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f5a623, #ff6b35);
  border-radius: 99px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Rage widget ── */
#w-rage {
  top: 32px;
  right: 32px;
  min-width: 160px;
  text-align: right;
}

.rage-value {
  background: linear-gradient(135deg, #ff6b35, #e8303a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(255, 107, 53, 0.55));
}

.rage-meter {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  margin-top: 10px;
  overflow: hidden;
}

.rage-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff6b35, #e8303a);
  border-radius: 99px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}