.torch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .torch {
    display: flex;
    justify-content: center;
    height: 150px;
  }

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

  .stick {
    position: relative;
    height: 120px;
  }

  .face {
    position: absolute;
    transform-style: preserve-3d;
    width: 30px;
    height: 30px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    gap: 0;
    background-color: #1a140d;
    transition: filter 0.3s ease;
    backface-visibility: hidden;
  }

  .top {
    transform: rotateX(90deg) translateZ(15px);
  }

  .left {
    transform: rotateY(-90deg) translateZ(15px);
  }

  .right {
    transform: rotateY(0deg) translateZ(15px);
  }

  .top div,
  .left div,
  .right div,
  .side-left div,
  .side-right div {
    width: 100%;
    height: 100%;
  }

  .top div:nth-child(1),
  .left div:nth-child(3),
  .right div:nth-child(3) {
    background-color: #2c2c25;
  }

  .top div:nth-child(2),
  .left div:nth-child(1),
  .right div:nth-child(1) {
    background-color: #221f11;
  }

  .top div:nth-child(3),
  .left div:nth-child(4),
  .right div:nth-child(4) {
    background-color: #21211c;
  }

  .top div:nth-child(4),
  .left div:nth-child(2),
  .right div:nth-child(2) {
    background-color: #1a140d;
  }

  .side {
    position: absolute;
    width: 30px;
    height: 120px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(8, 12.5%);
    gap: 0;
    cursor: pointer;
    translate: 0 12px;
    backface-visibility: hidden;
  }

  .side-left {
    transform: rotateY(-90deg) translateZ(15px) translateY(8px);
  }

  .side-right {
    transform: rotateY(0deg) translateZ(15px) translateY(8px);
  }

  .side div:nth-child(1) {
    background-color: #443622;
  }

  .side div:nth-child(2) {
    background-color: #2e2517;
  }

  .side div:nth-child(3),
  .side div:nth-child(5) {
    background-color: #4b3b23;
  }

  .side div:nth-child(4),
  .side div:nth-child(10) {
    background-color: #251e12;
  }

  .side div:nth-child(6) {
    background-color: #292115;
  }

  .side div:nth-child(7) {
    background-color: #4b3c26;
  }

  .side div:nth-child(8) {
    background-color: #292115;
  }

  .side div:nth-child(9) {
    background-color: #4b3a21;
  }

  .side div:nth-child(11),
  .side div:nth-child(15) {
    background-color: #3d311d;
  }

  .side div:nth-child(12) {
    background-color: #2c2315;
  }

  .side div:nth-child(13) {
    background-color: #493a22;
  }

  .side div:nth-child(14) {
    background-color: #2b2114;
  }

  .side div:nth-child(16) {
    background-color: #271e10;
  }

  input:checked ~ .torch .face {
    filter: drop-shadow(0px 0px 2px rgb(255, 255, 255))
      drop-shadow(0px 0px 10px rgba(255, 237, 156, 0.7))
      drop-shadow(0px 0px 25px rgba(255, 227, 101, 0.4));
  }

  input:checked ~ .torch .top div:nth-child(1),
  input:checked ~ .torch .left div:nth-child(3),
  input:checked ~ .torch .right div:nth-child(3) {
    background-color: #ffff97;
  }

  input:checked ~ .torch .top div:nth-child(2),
  input:checked ~ .torch .left div:nth-child(1),
  input:checked ~ .torch .right div:nth-child(1) {
    background-color: #ffd800;
  }

  input:checked ~ .torch .top div:nth-child(3),
  input:checked ~ .torch .left div:nth-child(4),
  input:checked ~ .torch .right div:nth-child(4) {
    background-color: #ffffff;
  }

  input:checked ~ .torch .top div:nth-child(4),
  input:checked ~ .torch .left div:nth-child(2),
  input:checked ~ .torch .right div:nth-child(2) {
    background-color: #ff8f00;
  }

  input:checked ~ .torch .side div:nth-child(1) {
    background-color: #7c623e;
  }

  input:checked ~ .torch .side div:nth-child(2) {
    background-color: #4c3d26;
  }

  input:checked ~ .torch .side div:nth-child(3),
  input:checked ~ .torch .side div:nth-child(5) {
    background-color: #937344;
  }

  input:checked ~ .torch .side div:nth-child(4),
  input:checked ~ .torch .side div:nth-child(10) {
    background-color: #3c2f1c;
  }

  input:checked ~ .torch .side div:nth-child(6) {
    background-color: #423522;
  }

  input:checked ~ .torch .side div:nth-child(7) {
    background-color: #9f7f50;
  }

  input:checked ~ .torch .side div:nth-child(8) {
    background-color: #403320;
  }

  input:checked ~ .torch .side div:nth-child(9) {
    background-color: #977748;
  }

  input:checked ~ .torch .side div:nth-child(11),
  input:checked ~ .torch .side div:nth-child(15) {
    background-color: #675231;
  }

  input:checked ~ .torch .side div:nth-child(12) {
    background-color: #3d301d;
  }

  input:checked ~ .torch .side div:nth-child(13) {
    background-color: #987849;
  }

  input:checked ~ .torch .side div:nth-child(14) {
    background-color: #3b2e1b;
  }

  input:checked ~ .torch .side div:nth-child(16) {
    background-color: #372a17;
  }

  input:not(:checked) ~ .torch .face {
    filter: none;
  }

}