@media screen and (max-width: 768px) and (orientation: portrait) {
    
    .scene-title { display: none }

    .episode-grid {
        display: block;
    }
    .episode-conversation {
        width: 100%;
    }

    .episode-conversation .restart.goals { 
        display: block;
        left: 110px;
    }

    .game-rules,
    .game-rules div { 
        position: absolute;
        left: 0; right: 0;
        top: 0; bottom: 0;
        margin: 0; padding: 0;
        width: 100%;
        max-width: 100%;
        z-index: 900;
        box-sizing: border-box;
    }
    .game-rules {
        display: none;
    }
    .game-rules div {
        padding: 60px 30px ;
        background: rgba(255, 251, 222, 0.9);
    }

    .episode-conversation .input input {
        font-size: 16px;
    }

    .history-message {
        padding: 10px 130px 20px 30px;
        font-size: 16px;
    }
    .history-message .history-name div {
        padding-left: 30px;  
    }
    .history-counterpart .history-message {
        padding: 10px 30px 20px 120px;
    }
    .history-counterpart .history-name div {
        padding-left: 120px;  
    }


    .history-portrait {
        height: 150px;
        margin-top: -150px;
    }
    .history-counterpart .history-portrait {
        height: 150px;
        margin-top: -150px;
    }
    .history-portrait-div {
        width: 150px;
    }
    .history-narrator {
        margin-left: 20px; 
        margin-right: 20px;
    }

    .history-finale {
        margin-left: 20px;
        margin-right: 20px;
        padding-left: 30px;
        padding-right: 30px;
        font-size: 18px;
    }



}