/* =========================================================
   COMPONENT : MusiclicDeduction
   Version : 1.0
   ========================================================= */

.musiclic-deduction{
  position:absolute;
  left:50%;
  top:50%;
  width:min(720px,90%);
  transform:translate(-50%,-50%) rotate(-0.4deg);
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.03)),#ead8b6;
  color:#2b2118;
  padding:30px 34px;
  border-radius:6px;
  box-shadow:0 14px 34px rgba(0,0,0,.38);
  font-family:Georgia,"Times New Roman",serif;
  animation:musiclicDeductionArrive .55s ease both;
}

.musiclic-deduction::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  pointer-events:none;
  box-shadow:inset 0 0 45px rgba(88,55,28,.22);
}

.musiclic-deduction > *{
  position:relative;
  z-index:1;
}

.musiclic-deduction-header{
  border-bottom:1px solid rgba(43,33,24,.24);
  padding-bottom:14px;
  margin-bottom:22px;
}

.musiclic-deduction-kicker{
  display:block;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.18em;
  opacity:.72;
}

.musiclic-deduction-title{
  display:block;
  margin-top:5px;
  font-size:25px;
  font-weight:normal;
}

.musiclic-deduction-question{
  font-size:20px;
  line-height:1.55;
  margin:0 0 22px;
}

.musiclic-deduction-options{
  display:grid;
  gap:12px;
  margin:22px 0;
}

.musiclic-deduction-option{
  display:block;
  position:relative;
  padding:15px 18px 15px 48px;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(43,33,24,.18);
  border-radius:7px;
  cursor:pointer;
  line-height:1.45;
  transition:background .2s ease,border-color .2s ease,transform .18s ease;
}

.musiclic-deduction-option:hover{
  background:rgba(255,255,255,.34);
  border-color:rgba(43,33,24,.30);
  transform:translateY(-1px);
}

.musiclic-deduction-option input{
  position:absolute;
  left:18px;
  top:18px;
}

.musiclic-deduction-option strong{
  display:block;
  margin-bottom:3px;
  font-size:16px;
}

.musiclic-deduction-option span{
  display:block;
  font-size:14px;
  opacity:.78;
}

.musiclic-deduction-button{
  padding:11px 20px;
  border:0;
  border-radius:6px;
  background:#4d3421;
  color:#fff;
  cursor:pointer;
  font-weight:bold;
  box-shadow:0 6px 14px rgba(0,0,0,.24);
}

.musiclic-deduction-button:hover{
  background:#332214;
}

.musiclic-deduction-feedback{
  display:none;
  margin-top:22px;
  padding:17px 20px;
  border-radius:7px;
  line-height:1.55;
  background:rgba(255,255,255,.26);
  border-left:4px solid rgba(112,34,26,.52);
}

.musiclic-deduction-feedback.is-visible{
  display:block;
  animation:musiclicDeductionFeedbackIn .35s ease both;
}

.musiclic-deduction-feedback.is-correct{
  border-left-color:rgba(70,112,58,.72);
}

.musiclic-deduction-feedback strong{
  display:block;
  margin-bottom:5px;
}

.musiclic-deduction-next{
  display:none;
  margin-top:18px;
}

.musiclic-deduction-next.is-visible{
  display:block;
}

@keyframes musiclicDeductionArrive{
  from{opacity:0;transform:translate(-50%,-43%) rotate(-0.4deg);}
  to{opacity:1;transform:translate(-50%,-50%) rotate(-0.4deg);}
}

@keyframes musiclicDeductionFeedbackIn{
  from{opacity:0;transform:translateY(7px);}
  to{opacity:1;transform:translateY(0);}
}

@media(max-width:768px){
  .musiclic-deduction{
    width:88%;
    padding:22px;
  }

  .musiclic-deduction-title{
    font-size:21px;
  }

  .musiclic-deduction-question{
    font-size:17px;
  }

  .musiclic-deduction-button{
    width:100%;
  }
}