/* pencil skin */
body:has([src*="oiia_pencil"]) #current-timer {
  font-family: 'Cheveuxdange', 'Arial Black', sans-serif;
  -webkit-text-stroke: 0; /* Remove stroke */
  -webkit-text-fill-color: transparent; /* Keep text transparent */
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.9), rgba(255, 100, 100, 0.9)); /* Red gradient */
  -webkit-background-clip: text; /* Apply gradient to text */
}

body:has([src*="oiia_coffee"]) #current-timer {
  -webkit-text-stroke: 2px rgba(44, 19, 7, 0.8);
  -webkit-text-fill-color: transparent;
  background: linear-gradient(45deg, #c87f3d, #8B4513);
  -webkit-background-clip: text;
  filter: drop-shadow(0 4px 6px rgba(139, 69, 19, 0.4));
  text-shadow: 2px 4px 8px rgba(139, 69, 19, 0.6);
  letter-spacing: 3px;
}

/* Draw Theme */
body:has([src*="oiia_draw"]) {
  background: #f0f0f0;
  background-image: 
    linear-gradient(45deg, #e7d6c4 25%, transparent 25%),
    linear-gradient(-45deg, #e7d6c4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e7d6c4 75%),
    linear-gradient(-45deg, transparent 75%, #e7d6c4 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  position: relative;
}

body:has([src*="oiia_draw"])::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(135deg, #ff7b7b33 25%, transparent 25%) -20px 0,
    linear-gradient(225deg, #ff7b7b33 25%, transparent 25%) -20px 0,
    linear-gradient(315deg, #ff7b7b33 25%, transparent 25%),
    linear-gradient(45deg, #ff7b7b33 25%, transparent 25%);
  background-size: 40px 40px;
  background-color: #ffffff33;
  z-index: -1;
  animation: paintFlow 10s linear infinite;
}

@keyframes paintFlow {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

body:has([src*="oiia_draw"]) #current-timer {
  -webkit-text-stroke: 2px rgba(44, 19, 7, 0.8);
  -webkit-text-fill-color: transparent;
  background: linear-gradient(45deg, #d2b69d, #ff66de);
  -webkit-background-clip: text;
  filter: drop-shadow(0 4px 6px rgba(139, 69, 19, 0.4));
  text-shadow: 2px 4px 8px rgba(139, 69, 19, 0.6);
  letter-spacing: 3px;
}

.pencil-skin {
  background-color: #d9bda5;
  background-image: 
    linear-gradient(90deg, transparent 79px, #88c4ce 79px, #80c4d0 81px, transparent 81px),
    linear-gradient(#000000 .1em, transparent .1em);
  background-size: 100% 1.2em;
}

/* Coffee Theme */
body:has([src*="oiia_coffee"]) {
  background-color: #8B4513;
  background-image: 
    repeating-linear-gradient(
      90deg,
      rgba(139, 69, 19, 0.8) 0px,
      rgba(160, 82, 45, 0.8) 20px,
      rgba(139, 69, 19, 0.8) 40px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(101, 67, 33, 0.5) 0px,
      rgba(85, 47, 23, 0.5) 2px,
      rgba(101, 67, 33, 0.5) 4px
    );
  position: relative;
}

body:has([src*="oiia_coffee"])::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* Sonic Theme */
.sonic-theme {
  background: url('Images/sonicore/sonic_b.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* Santa Theme */
.santa-theme {
  background-color: #c41e3a;
  background-image: linear-gradient(45deg, #c41e3a 25%, #8b0000 25%, #8b0000 50%, #c41e3a 50%, #c41e3a 75%, #8b0000 75%, #8b0000 100%);
  background-size: 56.57px 56.57px;
  position: relative;
}

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  animation: snowfall 5s linear infinite;
  opacity: 0.8;
}

/* She Theme */
.she-theme {
  background-color: #ff69b4;
  background-image: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
}

.heart {
  position: absolute;
  font-size: 20px;
  user-select: none;
  pointer-events: none;
  opacity: 0.8;
}

.heart-bottom {
  animation: floatBottom 4s ease-in-out infinite;
}

.heart-left {
  animation: floatLeft 4s ease-in-out infinite;
}

.heart-right {
  animation: floatRight 4s ease-in-out infinite;
}

.she-theme #current-timer {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(139, 0, 139, 0.7);
  font-size: 2.5rem;
}

/* Cook Theme */
.cook-theme {
  background-color: #f7d794;
  background-image: linear-gradient(45deg, #f7d794 25%, #f5cd79 25%, #f5cd79 50%, #f7d794 50%, #f7d794 75%, #f5cd79 75%, #f5cd79 100%);
  background-size: 56.57px 56.57px;
}

/* Squid Theme */
.squid-theme {
  background: url('../Images/doll_away.png') no-repeat center center fixed;
  background-size: cover;
  background-color: #00b140;
  background-position: center center;
}

.squid-theme #current-timer {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.7);
}

.squid-target {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  color: #f1efef;
  font-size: 1.2rem;
  font-family: "Arial Black", sans-serif;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

/* Underwater Theme */
.underwater-theme {
  position: relative;
  min-height: 100vh;
}

.underwater-theme::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0,119,190,0.3) 0%, rgba(0,119,190,0.1) 100%);
  pointer-events: none;
  z-index: -1;
}

.bubble {
  position: absolute;
  bottom: -20px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: bubbleFloat linear forwards;
  pointer-events: none;
}

.underwater-theme #current-timer {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  padding: 20px;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1px rgba(0, 119, 190, 0.5);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2),
              inset 0 0 15px rgba(255, 255, 255, 0.3);
  filter: none;
  animation: bubbleCounter 2s ease-in-out infinite;
}

/* Gun Theme */
.gun-theme {
  background: url('../Images/dark_alley.png') no-repeat center center fixed;
  background-size: cover;
}

.gun-message {
  position: fixed;
  color: #ff0000;
  font-family: "Arial Black", sans-serif;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
  z-index: 1000;
  pointer-events: none;
  animation: fadeInOut 2s ease-in-out;
  transform: translate(-50%, -50%);
}

#countdown-timer {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 30%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: #ff0000;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
  z-index: 100;
  font-family: "Arial Black", sans-serif;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  text-align: center;
  font-weight: bold;
  -webkit-text-stroke: 2px black;
}

#countdown-timer.active {
  opacity: 1;
  animation: pulse 1s infinite;
}

@media (max-width: 768px) {
  .she-theme #current-timer {
    font-size: 1.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .underwater-theme {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gun-message {
    font-size: 1.5rem;
  }

  #eliminationText {
    font-size: 2.5rem !important;
  }
}