/* =========================================================
   COMPONENT : MusiclicTrueFalse
   Version : 1.0
   ========================================================= */

.musiclic-truefalse{
  position:absolute; left:50%; top:50%;
  width:min(860px,92%); max-height:86%; overflow:auto;
  transform:translate(-50%,-50%) rotate(0.2deg);
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.04)),#ead8b6;
  color:#2b2118; padding:28px 32px; border-radius:7px;
  box-shadow:0 16px 38px rgba(0,0,0,.38);
  font-family:Georgia,"Times New Roman",serif;
  animation:musiclicTrueFalseArrive .55s ease both;
}

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

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

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

.musiclic-truefalse-kicker{
  display:block; text-transform:uppercase; font-size:12px;
  letter-spacing:.18em; opacity:.70; margin-bottom:5px;
}

.musiclic-truefalse-title{
  display:block; font-size:26px; font-weight:normal; line-height:1.25;
}

.musiclic-truefalse-intro{
  max-width:720px; font-size:16px; line-height:1.55; margin:0 0 22px;
}

.musiclic-truefalse-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px;
}

.musiclic-truefalse-card{
  position:relative; min-height:92px; padding:14px 14px 50px;
  border:1px solid rgba(43,33,24,.18); border-radius:8px;
  background:#f4e7cc; box-shadow:0 6px 14px rgba(0,0,0,.16);
  line-height:1.45;
}

.musiclic-truefalse-card.is-wrong{
  animation:musiclicTrueFalseShake .32s ease both;
  border-color:rgba(150,48,36,.58);
}

.musiclic-truefalse-card.is-correct{border-color:rgba(70,112,58,.66);}

.musiclic-truefalse-text{font-size:15px;}

.musiclic-truefalse-options{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; gap:8px;
}

.musiclic-truefalse-choice{
  flex:1; padding:7px 10px; border:1px solid rgba(43,33,24,.20);
  border-radius:6px; background:rgba(255,255,255,.30);
  color:#2b2118; cursor:pointer; font-weight:bold; font-size:12px;
}

.musiclic-truefalse-choice:hover{background:rgba(255,255,255,.50);}

.musiclic-truefalse-choice.is-selected{
  background:#4d3421; color:#fff; border-color:#4d3421;
}

.musiclic-truefalse-stamp{
  display:none; position:absolute; right:14px; top:12px;
  transform:rotate(-8deg); padding:7px 10px;
  border:2px solid rgba(112,34,26,.72);
  color:rgba(112,34,26,.88); border-radius:4px;
  text-transform:uppercase; font-size:11px; letter-spacing:.10em;
  font-weight:bold; background:rgba(255,255,255,.22);
}

.musiclic-truefalse-card.is-correct .musiclic-truefalse-stamp{display:block;}

.musiclic-truefalse-actions{
  display:flex; align-items:center; gap:12px;
  margin-top:22px; padding-top:16px;
  border-top:1px solid rgba(43,33,24,.16);
}

.musiclic-truefalse-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-truefalse-button:hover{background:#332214;}

.musiclic-truefalse-feedback{
  display:none; margin-top:16px; padding:15px 18px; border-radius:7px;
  background:rgba(255,255,255,.25);
  border-left:4px solid rgba(112,34,26,.52); line-height:1.5;
}

.musiclic-truefalse-feedback.is-visible{display:block;}
.musiclic-truefalse-feedback.is-success{border-left-color:rgba(70,112,58,.72);}

.musiclic-truefalse-next{display:none;margin-top:16px;}
.musiclic-truefalse-next.is-visible{display:block;}

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

@keyframes musiclicTrueFalseShake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  50%{transform:translateX(6px);}
  75%{transform:translateX(-3px);}
}

@media(max-width:768px){
  .musiclic-truefalse{width:90%;padding:22px;max-height:84%;}
  .musiclic-truefalse-title{font-size:21px;}
  .musiclic-truefalse-list{grid-template-columns:1fr;}
  .musiclic-truefalse-options{position:static;margin-top:14px;}
  .musiclic-truefalse-card{padding:15px;}
  .musiclic-truefalse-actions{display:block;}
  .musiclic-truefalse-button{width:100%;}
}