.torch-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.torch-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.torch-label {
  margin-top: 1rem;
  font-family: 'Montserrat', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}

.torch-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 180px;
}

.torch-head,
.torch-stick {
  position: absolute;
  width: 36px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
}

.torch-stick {
  height: 120px;
  top: 30px;
}

.torch-face {
  position: absolute;
  transform-style: preserve-3d;
  width: 36px;
  height: 36px;
  transition: background-color 0.5s ease, filter 0.5s ease;
}

.torch-top {
  transform: rotateX(90deg) translateZ(18px);
  background:
    linear-gradient(135deg, rgba(255, 255, 151, 0.35) 25%, rgba(255, 216, 0, 0.35) 25%, rgba(255, 216, 0, 0.35) 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%, rgba(255, 143, 0, 0.35) 75%);
  background-size: 18px 18px;
}

.torch-left {
  transform: rotateY(-90deg) translateZ(18px);
  background:
    linear-gradient(135deg, rgba(255, 216, 0, 0.35) 25%, rgba(255, 255, 255, 0.35) 25%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 143, 0, 0.35) 50%, rgba(255, 143, 0, 0.35) 75%, rgba(255, 255, 151, 0.35) 75%);
  background-size: 18px 18px;
}

.torch-right {
  transform: rotateY(0deg) translateZ(18px);
  background:
    linear-gradient(135deg, rgba(255, 216, 0, 0.35) 25%, rgba(255, 255, 255, 0.35) 25%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 143, 0, 0.35) 50%, rgba(255, 143, 0, 0.35) 75%, rgba(255, 255, 151, 0.35) 75%);
  background-size: 18px 18px;
}

.torch-side {
  position: absolute;
  width: 36px;
  height: 120px;
  transition: background 0.5s ease;
}

.torch-side-left {
  transform: rotateY(-90deg) translateZ(18px) translateY(8px);
  background:
    repeating-linear-gradient(
      to bottom,
      #4b3b23 0px, #2e2517 15px,
      #4b3b23 15px, #2e2517 30px,
      #5a4830 30px, #3d311d 45px,
      #4b3b23 45px, #2e2517 60px,
      #5a4830 60px, #3d311d 75px,
      #4b3b23 75px, #2e2517 90px,
      #5a4830 90px, #3d311d 105px,
      #4b3b23 105px, #2e2517 120px
    );
  background-size: 18px 120px;
  border-radius: 0 0 4px 4px;
}

.torch-side-right {
  transform: rotateY(0deg) translateZ(18px) translateY(8px);
  background:
    repeating-linear-gradient(
      to bottom,
      #4b3b23 0px, #2e2517 15px,
      #4b3b23 15px, #2e2517 30px,
      #5a4830 30px, #3d311d 45px,
      #4b3b23 45px, #2e2517 60px,
      #5a4830 60px, #3d311d 75px,
      #4b3b23 75px, #2e2517 90px,
      #5a4830 90px, #3d311d 105px,
      #4b3b23 105px, #2e2517 120px
    );
  background-size: 18px 120px;
  border-radius: 0 0 4px 4px;
}

.torch-toggle input:checked ~ .torch-visual .torch-top,
.torch-toggle input:checked ~ .torch-visual .torch-left,
.torch-toggle input:checked ~ .torch-visual .torch-right {
  background-size: 18px 18px;
}

.torch-toggle input:checked ~ .torch-visual .torch-top {
  background:
    linear-gradient(135deg, #ffff97 25%, #ffd800 25%, #ffd800 50%, #ffffff 50%, #ffffff 75%, #ff8f00 75%);
}

.torch-toggle input:checked ~ .torch-visual .torch-left {
  background:
    linear-gradient(135deg, #ffd800 25%, #ffffff 25%, #ffffff 50%, #ff8f00 50%, #ff8f00 75%, #ffff97 75%);
}

.torch-toggle input:checked ~ .torch-visual .torch-right {
  background:
    linear-gradient(135deg, #ffd800 25%, #ffffff 25%, #ffffff 50%, #ff8f00 50%, #ff8f00 75%, #ffff97 75%);
}

.torch-toggle input:checked ~ .torch-visual .torch-face {
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 12px rgba(255, 237, 156, 0.7))
    drop-shadow(0 0 30px rgba(255, 227, 101, 0.5))
    drop-shadow(0 0 50px rgba(255, 200, 50, 0.3));
}

.torch-toggle input:checked ~ .torch-visual .torch-side-left,
.torch-toggle input:checked ~ .torch-visual .torch-side-right {
  background:
    repeating-linear-gradient(
      to bottom,
      #7c623e 0px, #4c3d26 15px,
      #937344 15px, #3c2f1c 30px,
      #9f7f50 30px, #403320 45px,
      #7c623e 45px, #4c3d26 60px,
      #937344 60px, #3c2f1c 75px,
      #9f7f50 75px, #403320 90px,
      #7c623e 90px, #4c3d26 105px,
      #937344 105px, #3c2f1c 120px
    );
}

.torch-toggle input:not(:checked) ~ .torch-visual .torch-face {
  background:
    linear-gradient(135deg, #2a2a2a 25%, #1a1a1a 25%, #1a1a1a 50%, #333 50%, #333 75%, #222 75%);
  background-size: 18px 18px;
  filter: none;
}

.torch-toggle input:not(:checked) ~ .torch-visual .torch-side-left,
.torch-toggle input:not(:checked) ~ .torch-visual .torch-side-right {
  background:
    repeating-linear-gradient(
      to bottom,
      #2e2517 0px, #1a1410 15px,
      #332a1a 15px, #1e1810 30px,
      #2e2517 30px, #1a1410 45px,
      #332a1a 45px, #1e1810 60px,
      #2e2517 60px, #1a1410 75px,
      #332a1a 75px, #1e1810 90px,
      #2e2517 90px, #1a1410 105px,
      #332a1a 105px, #1e1810 120px
    );
}

@media (max-width: 768px) {
  .torch-visual {
    transform: scale(0.85);
    transform-origin: center top;
    height: 155px;
  }

  .torch-label {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .torch-visual {
    transform: scale(0.75);
    height: 140px;
  }

  .torch-label {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}