/* STORY SELECTOR */

.game-container .selection-title {
    position: absolute;
    width: 70%;
    font-size: 10vh;
    color: #fff;
    text-align: center;
    margin: 4% 15% 0 15%;
    font-weight: 600;
}

.game-container .select-user {
    position: absolute;
    width: 27.2%;
    font-size: 4.6vh;
    padding: .8%;
    color: #fff;
    text-align: center;
    margin: 41% 72% 0 7%;
    font-weight: 600;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.20);
    cursor: pointer;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05);
}

.game-container .select-user>span {
    font-size: 4vh;
}

.game-container .select-user:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.game-container .select-user.right {
    margin: 41% 72% 0 65%;
}
.game-container .select-user.middle {
    margin: 41% 72% 0 36%;
}

.game-container .selector-container {
    position: absolute;
    width: 90%;
    margin-left: 5%;
    margin-top: 16%;
    height: 53%;
}

.game-container .selector-container .story-selector {
    width: 30%;
    height: 27vh;
    position: relative;
    display: block;
    float: left;
}

.game-container .selector-container .story-selector .title {
    position: absolute;
    bottom: 3%;
    height: 10%;
    font-size: 2.5vh;
    color: #fff;
    text-align: center;
    width: 75%;
    margin-left: 20%;
}

.game-container .selector-container .story-selector .frame {
    position: absolute;
    width: 30vh;
    height: 25vh;
    margin-left: 5vh;

    width: 80%;
    height: 90%;
    margin-left: 16%;
}

.game-container .selector-container .story-selector .cover {
    background-color: #fff;
    position: absolute;

    width: 25.5vh;
    height: 20.5vh;
    margin-top: 3vh;
    margin-left: 8vh;

    width: 67%;
    height: 73%;
    margin-top: 10%;
    margin-left: 25%;
}

.game-container .selector-container .story-selector .cover.down {
    margin-top: 6.66%;
    margin-left: 21%;
}



/* READER */

.game-container .reader {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform ease-out 666ms;
    z-index: 2;
}

.game-container .reader.hideme {
    transform: translate3d(0, -100vh, 0);
}

.game-container .reader .last-word {
    transition: 333ms ease-in margin, z-index 444ms;
    position: absolute;
    width: 40%;
    margin: 51% 30%;
    color: #fff;
    font-size: 5vh;
    line-height: 5vh;
    text-align: center;
    font-weight: 600;
    background-color: #63D6FF;
    padding-top: 2vh;
    border-radius: 2vh;
    z-index: 1;
}

.game-container .reader .last-word.ng-hide {
    margin: 39% 30%;
    display: inherit !important;
    z-index: -1000;
}

.game-container .monitor {
    position: absolute;
    width: 87%;
    height: 67.86%;
    margin: 2% 10%;
    pointer-events: none;
}

.game-container .monitor.mask {
    opacity: .3;
    transition: opacity ease-in 999ms;
}

.game-container .reader-area {
    position: absolute;
    width: 75%;
    height: 62%;
    margin: 4% 13%;
    background-color: #fff;
}

.game-container .reader-area .text {
    padding: 2vh 3vh;
    font-size: 35px;
    position: relative;
    overflow-y: auto;
    height: 100%;
}

.game-container .reader-area .text span.highlight {
    background-color: #F0F0CB;
    color: #5F5F5F;
}

.game-container .reader-area .cover {
    height: 100%;
    width: inherit;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    transform: scale(.9);
}

.game-container .reader-area .image.left {
    max-width: 20%;
    display: inline-block;
    width: initial;
    height: auto;
    position: relative;
    float: left;
    margin: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.game-container .reader-area .image.center {
    width: 100%;
    display: block;
    width: auto;
    width: initial;
    height: 60%;
    position: relative;
    margin: 0 auto;
    border-radius: 10px;
    cursor: pointer;
}

.game-container .next-last-buttons {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 17%;
    height: 17%;
    margin: 47.5% 41.5%;
}
.game-container .bigger-smaller-buttons-pr {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 8%;
    height: 18%;
    margin: 10.5% 2.5%;
}
.game-container .text-bigger-pr {
    width: 100%;
    height: 50%;
    right: 16%;
    top: 0%;
}
.game-container .text-smaller-pr {
    width: 100%;
    height: 50%;
    right: 16%;
    top: 52%;
}
    .game-container .bigger-smaller-buttons-pr.ng-hide {
        margin: 10.5% 24.5%;
        display: inherit !important;
    }

    .game-container .next-last-buttons.triad {
        margin: 47.5% 33.5%;
    }

    .game-container .start-button {
        transition: 333ms ease-in margin;
        position: absolute;
        width: 17%;
        height: 17%;
        margin: 47.5% 41.5%;
    }

.game-container .done-reading-button {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 16.35%;
    height: 20.666%;
    margin: 60% 70%;
}

.game-container .done-reading-button.ng-hide {
    margin: 50% 70%;
}

.game-container .start-button.left {
    margin: 47.5% 60%;
}

.game-container .start-button.big {
    width: 24.8%;
    margin: 47.5% 37.6%;
}
.game-container .start-button.bigtriad {
    width: 21.8%;
    margin: 47.5% 30.6%;
}

.game-container .start-button.ng-hide {
    margin: 37.5% 41.5%;
    display: inherit !important;
}

.game-container .start-button.left.ng-hide {
    margin: 37.5% 60%;
}

.game-container .start-button.big.ng-hide {
    margin: 37.5% 37.6%;
}

.game-container .next-last-buttons .half {
    width: 50%;
    height: 100%;
}

.game-container .next-last-buttons .half.right {
    margin-left: 50%;
}

.game-container .next-last-buttons.ng-hide {
    margin: 38.5% 41.5%;
    display: inherit !important;
}

.game-container .scroll-buttons {
    transition: 333ms ease-out transform;
    position: absolute;
    width: 8%;
    height: 18%;
    margin: 16.5% 89.7%;
    transform-origin: left;
}

.game-container .scroll-buttons.ng-hide {
    transform: scale3d(0, 0, 0);
    display: inherit !important;
}

.game-container .scroll-buttons .half {
    height: 50%;
    width: 100%;
}

.game-container .scroll-buttons .half.bottom {
    top: 50%;
}

.game-container .page-counter {
    font-size: 4vh;
    position: absolute;
    width: 8%;
    margin: 48.7% 87.5%;
    color: #fff;
    font-weight: 800;
    text-align: right;
}

.game-container .max-image-x-btn {
    position: fixed;
    width: 10vh;
    height: 10.5vh;
    right: 0;
    top: 0;
    margin: 2vh;
    z-index: 2;
}

.game-container .max-image-background {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    left: 0;
    z-index: 1;
}

.game-container .max-image-background.ng-hide {
    transition: 333ms ease-out opacity;
    opacity: 0;
    display: inherit !important;
    pointer-events: none;
}

.game-container .max-image-container {
    transition: 333ms ease-out transform;
    transform: scale3d(1, 1, 1);
    width: 52.5%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
    z-index: 2;
}

.game-container .max-image-container .image {
    width: 100%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
}

.game-container .max-image-container.ng-hide {
    transform: scale3d(0, 0, 0);
    display: inherit !important;
}

.game-container .outro-back-plate {
    width: 50%;
    height: 26.8%;
    margin-left: 25%;
    margin-top: 16%;
}

.game-container .outro-congratulations-tilted {
    position: absolute;
    margin-left: 26%;
    margin-top: 10%;
    font-size: 8vh;
    font-weight: 600;
    color: #fff;
    transform: rotateZ(-1.3deg);
}

    .game-container .outro-congratulations-tilted.main {
        color: #0277E6;
        margin-top: 16%;
        font-size: 6.8vh;
        margin-left: 25.5%;
    }

.game-container .outro-congratulations-tilted.sub {
    margin-top: 21%;
    margin-left: 45%;
    font-size: 6.5vh;
}

.game-container .outro-congratulations-tilted.goal {
    margin-top: 26.5%;
    font-size: 10vh;
    margin-left: 45%;
    width: 12%;
    text-align: center;
}

.game-container .outro-score {
    position: absolute;
    margin-left: 6%;
    width: 28%;
    text-align: center;
    color: #fff;
    font-size: 6vh;
    font-weight: 600;
    line-height: 9vh;
    margin-top: 40%;
    transition: opacity ease-in 666ms;
}

.game-container .outro-score.right {
    margin-left: 66%;
}
.game-container .outro-score.triad-middle {
    margin-left: 49%;
}
.game-container .outro-score.triad-right {
    margin-left: 71%;
}

.game-container .outro-score p {
    font-size: 9vh;
}

.moveDown {
    top: 20px;
    position: relative;
}

/* SCROLLBARS */

#readerTextArea::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: #D1EFF9;
}

#readerTextArea::-webkit-scrollbar {
    width: 12px;
}

#readerTextArea::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #8DD9FF;
}

#readerTextArea::-webkit-scrollbar {
    width: 3vh;
}