/* =========================================================
   COMPONENT : MusiclicRestore
   Version : 2.0
   Rôle : restaurer une archive à partir de fragments
   ========================================================= */

.musiclic-restore{
  position:absolute;
  left:50%;
  top:50%;
  width:min(1000px,94%);
  max-height:88%;
  overflow:auto;
  transform:translate(-50%,-50%) rotate(-0.15deg);
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.04)),#ead8b6;
  color:#2b2118;
  padding:26px 30px;
  border-radius:8px;
  box-shadow:0 16px 38px rgba(0,0,0,.38);
  font-family:Georgia,"Times New Roman",serif;
  animation:musiclicRestoreArrive .55s ease both;
}

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

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

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

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

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

.musiclic-restore-intro{
  max-width:760px;
  font-size:16px;
  line-height:1.55;
  margin:0 0 18px;
}

.musiclic-restore-workspace{
  display:grid;
  grid-template-columns:minmax(340px,540px) 1fr;
  gap:22px;
  align-items:start;
}

.musiclic-restore-board{
  position:relative;
  width:100%;
  aspect-ratio:var(--musiclic-restore-ratio, 1.35);
  max-height:560px;
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.05)),#d8c29d;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(43,33,24,.20),inset 0 0 36px rgba(70,43,20,.22),0 10px 22px rgba(0,0,0,.22);
  overflow:hidden;
}

.musiclic-restore-board::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed rgba(43,33,24,.22);
  border-radius:5px;
  pointer-events:none;
}

.musiclic-restore-board.is-complete::before{
  opacity:.16;
}

.musiclic-restore-target{
  position:absolute;
  box-sizing:border-box;
  outline:1px dashed rgba(43,33,24,.10);
}

.musiclic-restore-piece{
  position:absolute;
  box-sizing:border-box;
  border:1px solid rgba(85,55,30,.20);
  background-image:var(--musiclic-restore-image);
  background-repeat:no-repeat;
  box-shadow:0 8px 16px rgba(0,0,0,.30);
  cursor:grab;
  touch-action:none;
  user-select:none;
  transition:
    left .18s ease,
    top .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    opacity .35s ease,
    filter .35s ease,
    border-color .35s ease;
  clip-path:var(--restore-clip, polygon(0 0,100% 0,100% 100%,0 100%));
}

.musiclic-restore-piece::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 18%, rgba(70,35,10,.06) 72%, transparent),
    radial-gradient(circle at 20% 30%, rgba(80,45,20,.10), transparent 38%),
    radial-gradient(circle at 82% 72%, rgba(80,45,20,.08), transparent 34%);
}

.musiclic-restore-piece::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:
    inset 0 0 18px rgba(80,45,20,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.musiclic-restore-piece.is-dragging{
  cursor:grabbing;
  z-index:80!important;
  box-shadow:0 18px 34px rgba(0,0,0,.42);
  transform:scale(1.035) rotate(0deg)!important;
}

.musiclic-restore-piece.is-placed{
  cursor:default;
  box-shadow:none;
  border-color:rgba(85,55,30,.10);
  filter:saturate(.97);
}

.musiclic-restore-piece.is-placed::before,
.musiclic-restore-piece.is-placed::after{
  opacity:.35;
}

.musiclic-restore-board.is-complete .musiclic-restore-piece{
  border-color:transparent;
  box-shadow:none;
  filter:saturate(1.02) contrast(1.01);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}

.musiclic-restore-board.is-complete .musiclic-restore-piece::before,
.musiclic-restore-board.is-complete .musiclic-restore-piece::after{
  opacity:.08;
}

.musiclic-restore-pieces{
  min-height:420px;
  padding:14px;
  border-radius:8px;
  background:rgba(255,255,255,.20);
  box-shadow:inset 0 0 0 1px rgba(43,33,24,.12);
}

.musiclic-restore-pieces-title{
  display:block;
  margin-bottom:12px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.16em;
  opacity:.68;
}

.musiclic-restore-pool{
  position:relative;
  min-height:390px;
}

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

.musiclic-restore-feedback.is-visible{display:block;}

.musiclic-restore-next{
  display:none;
  margin-top:16px;
}

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

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

@media(max-width:900px){
  .musiclic-restore-workspace{grid-template-columns:1fr;}
  .musiclic-restore-pieces{min-height:300px;}
  .musiclic-restore-pool{min-height:280px;}
}

@media(max-width:768px){
  .musiclic-restore{width:90%;padding:22px;max-height:84%;}
  .musiclic-restore-title{font-size:21px;}
  .musiclic-restore-intro{font-size:15px;}
}