body { background-color: black;}
.header-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; }

section { position: relative; width: 100%; }
footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 14vw; background-color: white; display: flex; z-index: 9; }
footer button { width: 50%; height: 100%; background-color: gainsboro; color: #444041; font-size: 5vw; font-family: 'MabinogiClassic'; }
footer button.active { background-color: white; }

.scene { position: relative; top: 0; z-index: 1; opacity: 1; }
.scene.hide { position: absolute; z-index: -1; opacity: 0; }

.mobile-layout .wrap { width: 100vmin; }

#stage2-mission2-game {
    position: absolute;
    width: 87.5%;
    height: 46.1%;
    top: 26.3125%;
    left: 6.25%;
}

#stage3-mission3-game {position: absolute;width: 75%;height: 66%;top: 26.6%;left: 12.5%;z-index: 9;}
#stage3-mission3-game .game-board {position: absolute;top: 0;left: 0;width: 100%;height: 64%;border-radius: 2.8%;overflow: hidden;background-position: 50% 50%;background-size: 98.5% 98.5%;background-repeat: no-repeat;}
#stage3-mission3-game .game-board.guide_0 { background-image: url('../../images/stage3-mission3-game-guide-0.png'); }
#stage3-mission3-game .game-board.guide_1 { background-image: url('../../images/stage3-mission3-game-guide-1.png'); }
#stage3-mission3-game .game-board.guide_2 { background-image: url('../../images/stage3-mission3-game-guide-2.png'); }
#stage3-mission3-game .game-board.guide_3 { background-image: url('../../images/stage3-mission3-game-guide-3.png'); }
#stage3-mission3-game .game-board.guide_4 { background-image: url('../../images/stage3-mission3-game-guide-4.png'); }
#stage3-mission3-game .game-board.guide_5 { background-image: url('../../images/stage3-mission3-game-guide-5.png'); }
#stage3-mission3-game .piece-wrap {position:absolute; width: 100%; height: 100%; top: 0; left: 0; }
#stage3-mission3-game .piece {display: none; cursor: move; position:absolute; width: 100%; height: 100%; top: 0; left: 0; background: url('../../images/stage3-mission3-game-bg.png'); transform: scale(0.45); z-index: 10; }
#stage3-mission3-game .piece.drag { transform: scale(1); }

#stage3-mission3-game.pattern_0 .piece.piece_0 { clip-path:polygon(0% 0%, 100% 0%, 50% 100%) }
#stage3-mission3-game.pattern_0 .piece.piece_1 { clip-path:polygon(100% 0%, 100% 100%, 0% 50%) }
#stage3-mission3-game.pattern_0 .piece.piece_2 { clip-path:polygon(0% 0%, 100% 50%, 0% 100%) }
#stage3-mission3-game.pattern_0 .piece.piece_3 { clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) }
#stage3-mission3-game.pattern_0 .piece.piece_4 { clip-path:polygon(50% 0%, 100% 100%, 0% 100%) }
#stage3-mission3-game.pattern_0 .piece.piece_5 { clip-path:polygon(0% 0%, 66.6666% 0%, 100% 100%, 33.3333% 100%) }
#stage3-mission3-game.pattern_0 .piece.piece_6 { clip-path:polygon(0% 0%, 100% 100%, 0% 100%) }

#stage3-mission3-game.pattern_1 .piece.piece_0 { clip-path:polygon(0% 0%, 100% 0%, 50% 100%) }
#stage3-mission3-game.pattern_1 .piece.piece_1 { clip-path:polygon(0% 0%, 100% 50%, 0% 100%) }
#stage3-mission3-game.pattern_1 .piece.piece_2 { clip-path:polygon(50% 0%, 100% 100%, 0% 100%) }
#stage3-mission3-game.pattern_1 .piece.piece_3 { clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) }
#stage3-mission3-game.pattern_1 .piece.piece_4 { clip-path:polygon(0% 50%, 100% 0%, 100% 100%) }
#stage3-mission3-game.pattern_1 .piece.piece_5 { clip-path:polygon(0% 33.3333%, 100% 0%, 100% 66.6666%, 0% 100%) }
#stage3-mission3-game.pattern_1 .piece.piece_6 { clip-path:polygon(100% 0%, 100% 100%, 0% 100%) }

#stage3-mission3-game.pattern_2 .piece.piece_0 { clip-path:polygon(0% 0%, 100% 0%, 0% 100%) }
#stage3-mission3-game.pattern_2 .piece.piece_1 { clip-path:polygon(0% 33.3333%, 100% 0%, 100% 66.6666%, 0% 100%) }
#stage3-mission3-game.pattern_2 .piece.piece_2 { clip-path:polygon(0% 0%, 100% 50%, 0% 100%) }
#stage3-mission3-game.pattern_2 .piece.piece_3 { clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) }
#stage3-mission3-game.pattern_2 .piece.piece_4 { clip-path:polygon(0% 0%, 100% 0%, 50% 100%) }
#stage3-mission3-game.pattern_2 .piece.piece_5 { clip-path:polygon(50% 0%, 100% 100%, 0% 100%) }
#stage3-mission3-game.pattern_2 .piece.piece_6 { clip-path:polygon(100% 0%, 100% 100%, 0% 50%) }

#stage3-mission3-game.pattern_3 .piece.piece_0 { clip-path:polygon(0% 0%, 100% 0%, 50% 100%) }
#stage3-mission3-game.pattern_3 .piece.piece_1 { clip-path:polygon(33.3333% 0%, 100% 0%, 33.3333% 100%, 0% 50%) }
#stage3-mission3-game.pattern_3 .piece.piece_2 { clip-path:polygon(100% 0%, 100% 100%, 0% 50%) }
#stage3-mission3-game.pattern_3 .piece.piece_3 { clip-path:polygon(0% 0%, 100% 66.6666%, 50% 100%, 0% 66.6666%) }
#stage3-mission3-game.pattern_3 .piece.piece_4 { clip-path:polygon(50% 0%, 100% 100%, 0% 100%) }
#stage3-mission3-game.pattern_3 .piece.piece_5 { clip-path:polygon(0% 0%, 66.6666% 0%, 100% 100%, 33.3333% 100%) }
#stage3-mission3-game.pattern_3 .piece.piece_6 { clip-path:polygon(0% 0%, 100% 100%, 0% 100%) }

#stage3-mission3-game.pattern_4 .piece.piece_0 { clip-path:polygon(0% 0%, 100% 0%, 0% 100%) }
#stage3-mission3-game.pattern_4 .piece.piece_1 { clip-path:polygon(100% 0%, 100% 66.6666%, 0% 100%, 0% 33.3333%) }
#stage3-mission3-game.pattern_4 .piece.piece_2 { clip-path:polygon(0% 0%, 100% 50%, 0% 100%) }
#stage3-mission3-game.pattern_4 .piece.piece_3 { clip-path:polygon(33.3333% 0%, 100% 0%, 33.3333% 100%, 0% 50%) }
#stage3-mission3-game.pattern_4 .piece.piece_4 { clip-path:polygon(50% 0%, 100% 100%, 0% 100%) }
#stage3-mission3-game.pattern_4 .piece.piece_5 { clip-path:polygon(50% 0%, 100% 33.3333%, 100% 100%, 0% 33.3333%) }
#stage3-mission3-game.pattern_4 .piece.piece_6 { clip-path:polygon(100% 0%, 100% 100%, 0% 50%) }

#stage3-mission3-game.pattern_5 .piece.piece_0 { clip-path:polygon(0% 0%, 100% 50%, 0% 100%) }
#stage3-mission3-game.pattern_5 .piece.piece_1 { clip-path:polygon(66.6666% 0%, 100% 50%, 66.6666% 100%, 0% 100%) }
#stage3-mission3-game.pattern_5 .piece.piece_2 { clip-path:polygon(50% 0%, 100% 100%, 0% 100%) }
#stage3-mission3-game.pattern_5 .piece.piece_3 { clip-path:polygon(0% 0%, 66.6666% 0%, 100% 100%, 33.3333% 100%) }
#stage3-mission3-game.pattern_5 .piece.piece_4 { clip-path:polygon(0% 0%, 100% 0%, 50% 100%) }
#stage3-mission3-game.pattern_5 .piece.piece_5 { clip-path:polygon(50% 0%, 100% 33.3333%, 100% 100%, 0% 33.3333%) }
#stage3-mission3-game.pattern_5 .piece.piece_6 { clip-path:polygon(0% 0%, 100% 0%, 100% 100%) }