/* =========================================================
   COMPONENT : MusiclicInvestigation
   Version : 1.0
   ========================================================= */

.musiclic-investigation{
  position:absolute;
  left:50%;
  top:50%;
  width:min(900px,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:musiclicInvestigationArrive .55s ease both;
}
.musiclic-investigation::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:7px;
  pointer-events:none;
  box-shadow:inset 0 0 48px rgba(88,55,28,.22);
}
.musiclic-investigation > *{position:relative;z-index:1;}
.musiclic-investigation-header{
  border-bottom:1px solid rgba(43,33,24,.22);
  padding-bottom:14px;
  margin-bottom:18px;
}
.musiclic-investigation-kicker{
  display:block;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.18em;
  opacity:.70;
  margin-bottom:5px;
}
.musiclic-investigation-title{
  display:block;
  font-size:26px;
  font-weight:normal;
  line-height:1.25;
}
.musiclic-investigation-intro{
  max-width:720px;
  font-size:16px;
  line-height:1.55;
  margin:0 0 22px;
}
.musiclic-investigation-board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:20px 0;
}
.musiclic-investigation-zone{
  min-height:190px;
  padding:14px;
  border:1px dashed rgba(43,33,24,.35);
  border-radius:8px;
  background:rgba(255,255,255,.20);
  transition:background .2s ease,border-color .2s ease;
}
.musiclic-investigation-zone.is-over{
  background:rgba(255,255,255,.38);
  border-color:rgba(43,33,24,.65);
}
.musiclic-investigation-zone h3{
  margin:0 0 8px;
  font-size:17px;
  font-weight:normal;
}
.musiclic-investigation-zone p{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.4;
  opacity:.75;
}
.musiclic-investigation-card-pool{
  margin-top:22px;
  padding:14px;
  border-radius:8px;
  background:rgba(255,255,255,.20);
}
.musiclic-investigation-card-pool-title{
  display:block;
  margin-bottom:12px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.16em;
  opacity:.68;
}
.musiclic-investigation-cards{display:flex;flex-wrap:wrap;gap:10px;}
.musiclic-investigation-card{
  display:inline-block;
  max-width:260px;
  padding:11px 14px;
  border:1px solid rgba(43,33,24,.18);
  border-radius:7px;
  background:#f4e7cc;
  color:#2b2118;
  box-shadow:0 5px 12px rgba(0,0,0,.16);
  cursor:grab;
  font-size:14px;
  line-height:1.35;
  user-select:none;
}
.musiclic-investigation-card:active{cursor:grabbing;}
.musiclic-investigation-card.is-wrong{
  animation:musiclicInvestigationShake .32s ease both;
  border-color:rgba(150,48,36,.55);
}
.musiclic-investigation-card.is-correct{border-color:rgba(70,112,58,.62);}
.musiclic-investigation-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(43,33,24,.16);
}
.musiclic-investigation-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-investigation-button:hover{background:#332214;}
.musiclic-investigation-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-investigation-feedback.is-visible{display:block;}
.musiclic-investigation-feedback.is-success{border-left-color:rgba(70,112,58,.72);}
.musiclic-investigation-next{display:none;margin-top:16px;}
.musiclic-investigation-next.is-visible{display:block;}
@keyframes musiclicInvestigationArrive{
  from{opacity:0;transform:translate(-50%,-43%) rotate(-0.2deg);}
  to{opacity:1;transform:translate(-50%,-50%) rotate(-0.2deg);}
}
@keyframes musiclicInvestigationShake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  50%{transform:translateX(6px);}
  75%{transform:translateX(-3px);}
}
@media(max-width:768px){
  .musiclic-investigation{width:90%;padding:22px;max-height:84%;}
  .musiclic-investigation-title{font-size:21px;}
  .musiclic-investigation-board{grid-template-columns:1fr;}
  .musiclic-investigation-card{max-width:100%;width:100%;box-sizing:border-box;}
  .musiclic-investigation-actions{display:block;}
  .musiclic-investigation-button{width:100%;}
}