/* December 12, 2024 */


.no_pointer_events {
   pointer-events: none;
}


/* 💛 #yellow_drag_zone_container [s.DragContainer][s.Container] 💛 */
#yellow_drag_zone_container {
   position: absolute;
   left: 50%;
   bottom: 316px;
   transform: translateX(-50%);
   display: flex;
   justify-content: center;
   align-items: flex-end;
   height: calc(100% - 316px - 297px);
   width: 100%;
}

/* 💛 #yellow_drag_area [s.DragArea][s.Area] 💛 */
#yellow_drag_area {
   position: relative;
   display: flex;
   justify-content: space-between;
   height: 70px;
   width: calc((70px * 5) + (6px * 4) + (1px * 5 * 2));
}

#yellow_drag_area.long {
   height: 100%;
   transition: height 1s 0s;
}

.yellow_letter_drag_zone.long {
   height: 100%;
}

/* 💛 .yellow_letter_drag_zone [s.DragZones][s.Zones] 💛 */
.yellow_letter_drag_zone {
   user-select: none;
   text-transform: uppercase;
   text-align: center;
   position: relative;
   display: inline-block;
   width: 80px;
   height: 70px;
}

.yellow_letter_drag_zone:before,
.yellow_letter_drag_zone:nth-child(5):after {
   content: '';
   position: absolute;
   bottom: 0;
   display: inline-block;
   width: 2px;
   height: 100%;
   margin-bottom: 16px;
}

.yellow_letter_drag_zone:before {
   left: 0;
   transform: translateX(-100%);
}

.yellow_letter_drag_zone:nth-child(5):after {
   right: 0;
   transform: translateX(100%);
}

.yellow_letter_drag_zone>span {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   pointer-events: none;
   user-select: none;
   font-weight: bold;
   font-size: 54px;
   display: inline-block;
   justify-content: center;
   align-items: center;
   margin-bottom: 16px;
   width: 100%;
   height: 100%;
}


.yellow_letter_drag_zone.hide {
   display: none;
}

.yellow_letter_drag_zone.long>span {
   box-sizing: content-box;
   height: 71px;
   padding-bottom: 50px;
   transition: padding-bottom 1s 1.2s, height 1.2s, color 5s;
}










/* 💛  [s.] 💛 */



/* 💛  [s.] 💛 */