body,
body * {
  padding: 0;
  margin: 0;
  font-family: "KT Projekt", sans-serif;
}

/* Made body transparent for OBS overlay */
body {
  width: 100vw;
  height: 100vh;
  background: transparent;
}

:root {
  --background-color: #010101;
  --outline-color: #1d1d1d;
  --top-bar-color: #feb801;
  --text-color: #ffffff;
  --paused-bg: #ff9702;
  --paused-bar: #010101;
  --happy-hour-gradient: #fdcc00;
  --notification-add: #feb801;
  --notification-subtract: #ddded3;
}

/* Removed border from container, will be applied to timer-content only */
#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 180px;
  overflow: hidden;
}

/* Added timer-content wrapper for border that doesn't affect top bar */
.timer-content {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-color);
  border: 2px solid var(--outline-color);
  border-top: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Paused state - border matches background */
#container.paused .timer-content {
  background-color: var(--paused-bg);
  border-color: var(--paused-bg);
}

/* Added yellow top bar */
.timer-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  background-color: var(--top-bar-color);
  z-index: 3;
  transition: background-color 0.3s ease;
}

/* Paused state top bar becomes black */
#container.paused .timer-top-bar {
  background-color: var(--paused-bar);
}

/* During add notification, top bar and border match notification color */
#container.notification-add .timer-top-bar {
  background-color: var(--notification-add);
}

#container.notification-add .timer-content {
  border-color: var(--notification-add);
}

/* During subtract notification, top bar and border match notification color */
#container.notification-subtract .timer-top-bar {
  background-color: var(--notification-subtract);
}

#container.notification-subtract .timer-content {
  border-color: var(--notification-subtract);
}

#textDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 5;
}

p {
  color: var(--text-color);
  font-size: 5rem;
  font-weight: 400;
  z-index: 1;
  transition: font-size 0.3s ease;
}

/* Smaller, lighter timer text when paused */
#container.paused #timeText {
  font-size: 3rem;
  font-weight: 300;
  margin-top: 30px;
  color: #010101;
}

/* Paused overlay with PAUSADO text */
.paused-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--paused-bg);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 30px;
  z-index: 1;
  transition: opacity 0.3s ease;
}

#container.paused .paused-overlay {
  display: flex;
}

.paused-text {
  font-size: 3rem;
  font-weight: 500;
  color: #010101;
}

/* Happy hour gradient overlay with smooth animation */
.happy-hour-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to top, var(--happy-hour-gradient), transparent);
  opacity: 0;
  z-index: 1;
  transition: height 0.6s ease, opacity 0.6s ease;
}

#container.happy-hour .happy-hour-overlay {
  height: 100%;
  opacity: 0.4;
  animation: pulse-gradient 2s ease-in-out infinite;
}

@keyframes pulse-gradient {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

/* Notification overlay for time add/subtract */
.notification-overlay {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  opacity: 0;
  transition: none;
}

.notification-overlay.show-add {
  background-color: var(--notification-add);
  animation: slide-notification 0.8s ease-out forwards;
}

.notification-overlay.show-subtract {
  background-color: var(--notification-subtract);
  animation: slide-notification 0.8s ease-out forwards;
}

.notification-overlay .notification-text {
  font-size: 5rem;
  font-weight: 600;
  color: #010101;
}

@keyframes slide-notification {
  0% {
    top: -100%;
    opacity: 0;
  }
  20% {
    top: 0;
    opacity: 1;
  }
  80% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    opacity: 0;
  }
}

img {
  position: absolute;
  top: 0;
  bottom: 0;
}

canvas {
  width: 500px;
  height: 180px;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
}

.addedTime {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: none;
  z-index: 5;
  font-weight: 400;
  font-size: 3.25rem;
  color: var(--background-color);
  text-shadow: 0 0 1.5rem var(--text-color);
  transition: top 1s ease-out, opacity .5s ease-out;
}

.timer-container {
  transition: all 0.3s ease;
}

.time-added {
  animation: time-change-green 0.5s ease-out;
}

@keyframes time-change-green {
  0% {
    background-color: rgba(46, 204, 113, 0.2);
  }
  50% {
    background-color: rgba(46, 204, 113, 0.4);
  }
  100% {
    background-color: transparent;
  }
}

.time-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  font-size: 4rem;
  font-weight: bold;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: time-notification 3s ease-out forwards;
}

.time-notification.added {
  color: #2ecc71;
}

.time-notification.subtracted {
  color: #e74c3c;
}

@keyframes time-notification {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}