#onePiece {
    position:fixed;
    left:50%;
    top:50%;

    width:82px;
    height:82px;

    z-index:1;

    pointer-events:none;

    transform:
        translate(-50%,-50%)
        translate(var(--piece-x),var(--piece-y));

    transform-origin:
        var(--piece-origin-x)
        var(--piece-origin-y);

    transition:
        transform 1.1s ease;
}

.top-area {
    position:relative;
    z-index:2;
}

#onePiece .piece-shape {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    transform:
        rotate(var(--piece-rotate));

    transform-origin:center center;

    pointer-events:none;
}

#onePiece .piece-shape svg {
    display:block;

    width:100%;
    height:100%;

    overflow:visible;

    pointer-events:none;
}

#onePiece .piece-shape svg path,
#onePiece .piece-shape svg rect,
#onePiece .piece-shape svg circle,
#onePiece .piece-shape svg ellipse,
#onePiece .piece-shape svg polygon,
#onePiece .piece-shape svg polyline {
    pointer-events:auto;
    cursor:default;
}

#onePiece .piece-guide,
#onePiece .piece-secret {
    position:absolute;

    left:50%;

    white-space:nowrap;

    pointer-events:none;

    z-index:3;

    color:#5c5050;

    line-height:1.4;
}

#onePiece .piece-guide {
    top:100%;

    margin-top:8px;

    transform:
        translateX(-50%);

    font-size:12px;

    opacity:0;

    transition:
        opacity 0.35s ease;
}

#onePiece .piece-secret {
    top:50%;

    transform:
        translate(-50%,-50%);

    font-size:3px;

    opacity:0;

    transition:
        opacity 0.5s ease;
}

body.one-piece-mode {
    overflow:hidden;
}

body.one-piece-mode .top-area .categories,
body.one-piece-mode .top-area .controls,
body.one-piece-mode main,
body.one-piece-mode #modal {
    display:none;
}

body.one-piece-mode .piece-guide {
    opacity:1;
}

#onePiece.is-open {
    transform:
        translate(-50%,-50%)
        translate(var(--piece-x),var(--piece-y))
        scale(6);
}

#onePiece.is-open .piece-guide {
    opacity:0 !important;
}

#onePiece.is-open .piece-secret {
    opacity:1;
}

@media (max-width:780px) {
    #onePiece {
        width:60px;
        height:60px;
    }

    #onePiece.is-open {
        transform:
            translate(-50%,-50%)
            translate(var(--piece-x),var(--piece-y))
            scale(5.5);
    }

    #onePiece .piece-guide {
        font-size:11px;
        margin-top:7px;
    }

    #onePiece .piece-secret {
        font-size:3px;
    }
}