.fgmLockPick {
    --uniVar: 1px;
    --fgmLockWidth:     296px;
    --fgmLockSpringFill:  2px;
    --fgmLockGap:         3px;
    --fgmLockKeyWidth:   32px;
    --fgmLockKeyHeight:  32px;
    --fgmLockSlotWidth:  32px;
    --fgmLockSlotHeight: 32px;
    --fgmLockSlotOffset: 12px;
    --fgmLockHeight:    110px;
    --fgmLockKeyItemWidth: 128;
    --fgmLockAnimSlotTime:   0.3s;
    --fgmLockAnimSpringTime: 0.4s;
}

.fgmLockPickBottom {
    --fgmLockWidth:     300px;
    --fgmLockSlotHeight: 72px;
    --fgmLockHeight:    150px;
    --fgmLockAnimSlotTime: 0.6s;
}

.fgmLockWrap { width: var(--fgmLockWidth); }

.fgmLockDecLine {
    border-radius: calc(var(--uniVar) * 2);
    min-height: calc(12 * var(--uniVar));
}

.fgmKeyItem.sel { z-index: 1; }

.fgmKeyImg { width: calc(var(--fgmLockKeyItemWidth) * var(--uniVar)); }

.fgmKeyItem.rotate .fgmKeyImg { transform: rotate(180deg); }

.fgmKeyCapL { transform: translateX(96px); }
.fgmKeyCapR { transform: scaleY(-1); transform-origin: 16px 16px; }

.fgmKeyDef,
.fgmKeyCapDef,
.fgmLockPolyDef,
.fgmSpringLine,
.fgmKey.stroke,
.fgmLockPoly.stroke { vector-effect: non-scaling-stroke; }





/* Lock item */



.fgmLockList { height: var(--fgmLockHeight); }

.fgmLockSlot,
.fgmLockItem { width: var(--fgmLockSlotWidth); }

.fgmLockItem:not(.sel, .success) .fgmLockPolyItem.top { display: none; }

.fgmLockItem.success { z-index: 1; }

.fgmLockPickTop .fgmLockItem + .fgmLockItem { margin-left: calc(var(--uniVar) * -1); }

.fgmLockPickTop .fgmLockSlotWrap { height: calc(var(--fgmLockSlotHeight) + var(--fgmLockSlotOffset)); }

.fgmLockSlot { height: var(--fgmLockSlotHeight); }

.fgmKey.fill,
.fgmLockPoly.fill { fill: currentColor; }

.fgmKey.stroke,
.fgmLockPoly.stroke { stroke-width: var(--uniVar); }

/* end */



/* Spring */

.fgmLockSpring { margin: calc(var(--uniVar) + (var(--fgmLockSpringFill) / 2)); }

.fgmSpringLine,
.fgmKey.stroke,
.fgmLockPoly.stroke {
    fill: none;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-linecap:  round;
}

.fgmSpringLine.bg  { stroke-width: var(--fgmLockSpringFill); }
.fgmSpringLine.str { stroke-width: calc(var(--fgmLockSpringFill) + (var(--uniVar) * 2)); }

.fgmLockSpringFoot { height: calc(var(--fgmLockSpringFill) + (var(--uniVar) * 2)); }

.fgmLockSpringFoot.top {
    border-bottom-left-radius:  calc(var(--uniVar) * 2);
    border-bottom-right-radius: calc(var(--uniVar) * 2);
}

.fgmLockSpringFoot.bottom {
    border-top-left-radius:  calc(var(--uniVar) * 2);
    border-top-right-radius: calc(var(--uniVar) * 2);
}

.fgmSpringMar { margin: 0 calc(var(--uniVar) * 4); }

/* end */



/* Animations */

.fgmLockItem,
.fgmLockPolyItem,
.fgmLockCircleRotator,
.fgmLockCircleArcItem:not(.fill) .fgmLockCircleArcPath {
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.fgmLockPickTop .fgmLockItem.success .fgmLockPolyItem.top {
    animation-name: fgmLockSuccessSlot;
    animation-duration: var(--fgmLockAnimSlotTime);
}

.fgmLockPickTop .fgmLockItem.sel .fgmLockPolyItem.top {
    animation-name: fgmLockFailSlot;
    animation-duration: calc(var(--fgmLockAnimSlotTime) * 2);
}

.fgmLockPickTop .fgmLockItem.success {
    animation-name: fgmLockSuccessSpring;
    animation-duration: var(--fgmLockAnimSpringTime);
    animation-delay: calc(var(--fgmLockAnimSlotTime) / 2);
}

.fgmLockPickTop .fgmLockItem.sel {
    animation-name: fgmLockFailSpring;
    animation-duration: calc(var(--fgmLockAnimSpringTime) * 2);
}

@keyframes fgmLockSuccessSlot {
    from { transform: translateY(calc(var(--fgmLockSlotOffset) * -1)); }
    to   { transform: translateY(0); }
}

@keyframes fgmLockSuccessSpring {
    from { padding-top: 0; }
    to   { padding-top: calc(var(--fgmLockSlotHeight) - var(--uniVar)); }
}

@keyframes fgmLockFailSlot {
    0%   { transform: translateY(calc(var(--fgmLockSlotOffset) * -1)); }
    20%  { transform: translateY(0); }
    60%  { transform: translateY(calc(var(--fgmLockSlotOffset) * -1)); opacity: 1; }
    100% { transform: translateY(calc(var(--fgmLockSlotOffset) * -1)); opacity: 0; }
}

@keyframes fgmLockFailSpring {
    0%   { padding-top: 0; }
    10%  { padding-top: 0; }
    30%  { padding-top: calc((var(--fgmLockSlotHeight) - var(--uniVar)) / 2); }
    100% { padding-top: 0; }
}

/* end */










/* Bottom lockPick */

.fgmLockPickBottom .fgmLockPolyItem.top {
    width:  var(--fgmLockKeyWidth);
    height: var(--fgmLockKeyHeight);
}

.fgmLockPickBottom .fgmLockList { gap: var(--fgmLockGap); }

.fgmLockPickBottom .fgmLockItemWrap { padding: 0 var(--fgmLockGap);  }

.fgmKeyHole { height: calc(var(--fgmLockKeyHeight) + var(--fgmLockSlotOffset)); }

.fgmLockPickBottom .fgmLockItemWrap:before,
.fgmLockPickBottom .fgmLockItemWrap:after {
    content: "";
    position: absolute;
    display: block;
    -webkit-mask-image: var(--fgmLockItemWrapPath);
    mask-image:         var(--fgmLockItemWrapPath);
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
    -webkit-mask-size: 32px 320px;
    mask-size:         32px 320px;
    background-color: currentColor;
    pointer-events: none;
    width:  calc(8 * var(--uniVar)) ;
    height: calc(42 * var(--uniVar));
    bottom: 0;
}

.fgmLockPickBottom .fgmLockItemWrap:before {
    left:  0;
    --fgmLockItemWrapPath: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMjAiPjxwb2x5Z29uIHBvaW50cz0iMzIgMzIgMCAwIDAgMzIwIDMyIDMyMCAzMiAzMiIvPjwvc3ZnPg==');
    -webkit-mask-position: top left;
    mask-position:         top left;
}
.fgmLockPickBottom .fgmLockItemWrap:after {
    right: 0;
    --fgmLockItemWrapPath: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMjAiPjxwb2x5Z29uIHBvaW50cz0iMCAzMiAzMiAwIDMyIDMyMCAwIDMyMCAwIDMyIi8+PC9zdmc+');
    -webkit-mask-position: top right;
    mask-position:         top right;
}

/* Animations */

.fgmLockPickBottom .fgmLockItem:is(.sel, .success) .fgmLockPolyItem.top {
    animation-name: fgmLockSlotBottom;
    animation-duration: var(--fgmLockAnimSlotTime);
}

.fgmLockPickBottom .fgmLockItem.success,
.fgmLockItem.activated:not(.sel, .success) { animation-duration: var(--fgmLockAnimSpringTime); }

.fgmLockPickBottom .fgmLockItem.success { animation-name: fgmLockSuccessSpringBottom; }
.fgmLockItem.activated:not(.sel, .success) { animation-name: fgmLockBackBottom; }

.fgmLockPickBottom .fgmLockItem.sel {
    animation-name: fgmLockFailSpringBottom;
    animation-duration: var(--fgmLockAnimSlotTime);
}

@keyframes fgmLockSlotBottom {
    0%   { transform: translateY(var(--fgmLockSlotOffset)); }
    20%  { transform: translateY(0); }
    60%  { transform: translateY(var(--fgmLockSlotOffset)); opacity: 1; }
    100% { transform: translateY(var(--fgmLockSlotOffset)); opacity: 0; }
}

@keyframes fgmLockSuccessSpringBottom {
    0%   { padding-bottom: 0; }
    10%  { padding-bottom: 0; }
    100% { padding-bottom: calc(var(--fgmLockSlotHeight) / 2); }
}

@keyframes fgmLockFailSpringBottom {
    0%   { padding-bottom: 0; }
    10%  { padding-bottom: 0; }
    30%  { padding-bottom: calc((var(--fgmLockSlotHeight) - var(--uniVar)) / 5); }
    100% { padding-bottom: 0; }
}

@keyframes fgmLockBackBottom {
    from { padding-bottom: calc(var(--fgmLockSlotHeight) / 2); }
    to   { padding-bottom: 0; }
}

/* end */











/* Circle lockpick */

.fgmLockPickCircle {
    --fgmLockWidth:    296px;
    --fgmLockCircleSizeRaw: 31.831;
    --fgmLockCircleSize: 120;
    --fgmLockArcLength:   50;
    --fgmLockArc:        180;
    --fgmLockArcStroke:    3;
    --fgmLockArcGap:       3;
    --fgmLockArcOutGap:    8;
    --fgmLockArcShowTime:   0.5s;
    --fgmLockArcRotateTime: 0.5s;
}

.fgmLockPickCirclePlayground {
    position: absolute;
    display: block;
    width:  calc(var(--fgmLockCircleSize) * 1px);
    height: calc(var(--fgmLockCircleSize) * 1px);
    pointer-events: none;
}

.fgmLockCircleArcList,
.fgmLockCircleArc,
.fgmLockCircleArcItemWrap,
.fgmLockCircleArcItem {
    position: absolute;
    display: block;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
}

.fgmLockCircleArc { margin: calc((var(--fgmLockArcLevel) * var(--fgmLockArcOutGap)) * -1px); }

.fgmLockCircleArcItemWrap.left { transform: scaleX(-1); }

.fgmLockCircleArcItem { transform: rotate(calc((var(--fgmLockArc) - (var(--fgmLockArc) / var(--fgmLockArcLevel)) - (var(--fgmLockArc) - (var(--fgmLockArc) * (var(--fgmLockArcPosition) / var(--fgmLockArcLevel))))) * 1deg)); }
.fgmLockCircleArcPath { stroke-width: calc((var(--fgmLockArcStroke) * var(--fgmLockCircleSizeRaw) / (var(--fgmLockCircleSize) + (var(--fgmLockArcOutGap) * var(--fgmLockArcLevel) * 2))) * 1px); }

.fgmLockCircleArcItem:not(.fill) .fgmLockCircleArcPath {
    stroke-dashoffset: calc(var(--fgmLockArcGap) / -2);
    stroke-dasharray: calc((var(--fgmLockArcLength) / var(--fgmLockArcLevel) - var(--fgmLockArcGap)) * 1px), 100;
    animation-name: fgmLockArcShow;
    animation-duration: var(--fgmLockArcShowTime);
}

@keyframes fgmLockArcShow {
    from { stroke-dasharray: 0, 100; }
    to { stroke-dasharray: calc((var(--fgmLockArcLength) / var(--fgmLockArcLevel) - var(--fgmLockArcGap)) * 1px), 100; }
}

.fgmLockCircleArcImg {
    display: block;
    width:  100%;
    height: 100%;
    overflow: visible;
    transform: rotate(270deg);
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke: currentColor;
    fill: none;
}

.fgmLockCircleArc.lvl0 { --fgmLockArcLevel: 0; } .fgmLockCircleArcItemWrap.c0 { --fgmLockArcPosition: 1; }
.fgmLockCircleArc.lvl1 { --fgmLockArcLevel: 1; } .fgmLockCircleArcItemWrap.c1 { --fgmLockArcPosition: 1; }
.fgmLockCircleArc.lvl2 { --fgmLockArcLevel: 2; } .fgmLockCircleArcItemWrap.c2 { --fgmLockArcPosition: 2; }
.fgmLockCircleArc.lvl3 { --fgmLockArcLevel: 3; } .fgmLockCircleArcItemWrap.c3 { --fgmLockArcPosition: 3; }
.fgmLockCircleArc.lvl4 { --fgmLockArcLevel: 4; } .fgmLockCircleArcItemWrap.c4 { --fgmLockArcPosition: 4; }
.fgmLockCircleArc.lvl5 { --fgmLockArcLevel: 5; } .fgmLockCircleArcItemWrap.c5 { --fgmLockArcPosition: 5; }
.fgmLockCircleArc.lvl6 { --fgmLockArcLevel: 6; } .fgmLockCircleArcItemWrap.c6 { --fgmLockArcPosition: 6; }
.fgmLockCircleArc.lvl7 { --fgmLockArcLevel: 7; } .fgmLockCircleArcItemWrap.c7 { --fgmLockArcPosition: 7; }
.fgmLockCircleArc.lvl8 { --fgmLockArcLevel: 8; } .fgmLockCircleArcItemWrap.c8 { --fgmLockArcPosition: 8; }

.fgmLockCircleArc.lvl0 .fgmLockCircleArcItem:not(.fill) .fgmLockCircleArcPath { --fgmLockArcLevel: 1; }

/* Animations */

.fgmLockCircleRotator { animation-duration: var(--fgmLockArcRotateTime); }

.fgmLockCircleRotator.rotateL { animation-name: fgmLockCircleRotateL; }
.fgmLockCircleRotator.rotateR { animation-name: fgmLockCircleRotateR; }

@keyframes fgmLockCircleRotateL {
    0%   { transform: rotate(0); }
    50%  { transform: rotate(-90deg); }
    100% { transform: rotate(0); }
}

@keyframes fgmLockCircleRotateR {
    0%   { transform: rotate(0); }
    50%  { transform: rotate(90deg); }
    100% { transform: rotate(0); }
}










@media (min-width: 600px) and (min-height: 680px) {
    .fgmLockPick {
        --uniVar: 2px;
        --fgmLockSpringFill:  4px;
        --fgmLockGap:         6px;
        --fgmLockKeyWidth:   64px;
        --fgmLockKeyHeight:  64px;
        --fgmLockSlotWidth:  64px;
        --fgmLockSlotOffset: 24px;
    }

    .fgmLockPickTop {
        --fgmLockWidth:     576px;
        --fgmLockHeight:    220px;
        --fgmLockSlotHeight: 64px;
    }

    .fgmLockPickBottom {
        --fgmLockWidth:      584px;
        --fgmLockHeight:     300px;
        --fgmLockSlotHeight: 144px;
    }

    .fgmLockPickCircle {
        --fgmLockWidth: 450px;
        --fgmLockArcStroke:   4;
        --fgmLockArcGap:      4;
        --fgmLockArcOutGap:  12;
        --fgmLockCircleSize: 180;
    }

    .fgmKeyItem { --uniVar: 1px; }
    .fgmKeysGrid { grid-template-columns: repeat(4,  1fr); }
    .fgmLockPickCircle .fgmKeysGrid { grid-template-columns: repeat(3,  1fr); }
}