:root{--max-game-width:500px;--header-height:50px;--light-green:rgba(0,128,0,.5);--light-gray:#d3d3d3;--opacity-50:hsla(0,0%,100%,.5);font-family:Clear Sans,Helvetica Neue,Arial,sans-serif}:root,body{height:100%}body{margin:0;padding:0}#app-container,#game-container{height:100%}.game{height:calc(100% - 50px);height:calc(100% - var(--header-height));margin:0 auto;max-width:500px;max-width:var(--max-game-width);width:100%}.game,.keyboard{display:flex;flex-direction:column}.keyboard{align-items:center;justify-content:center;padding:10px 5px}.keyboardRow{display:flex;flex-direction:row;justify-content:center;width:100%}.keyboard .keyboardRow:not(:last-child){margin-bottom:5px}.button{background-color:#d3d3d3;background-color:var(--light-gray);border:0;border-radius:4px;color:#000;cursor:pointer;font-family:inherit;font-weight:700;height:60px;justify-content:center;text-transform:uppercase}.keyboardRow .button:not(:last-child){margin-right:5px}.characterButton,.keyboardSpacer{width:40px}.enterButton{background-color:rgba(0,128,0,.5);background-color:var(--light-green);width:60px}.deleteButton{width:60px}.deleteButton svg{height:24px;width:24px}.toast{border-radius:5px;display:none;left:50%;padding:5px;pointer-events:none;position:absolute;text-align:center;-webkit-transform:translate(-50%);transform:translate(-50%);z-index:2000}.aboveKeyboardToast{bottom:205px}#error-toast{background-color:#b22222;color:#fff}#success-toast{background-color:green;color:#fff}#generic-toast{background-color:#000;color:#fff}.belowHeaderToast{top:80px}#special-message-toast{background-color:#000;color:#fff}.gameBoard{align-items:center;flex-grow:1;justify-content:center}.gameBoard,.inputRowsContainer{display:flex;flex-direction:column;overflow:auto}.inputRowsContainer{padding-bottom:10px;padding-top:10px;width:100%}.row{display:flex;justify-content:center}.inputRowsContainer .row:not(:nth-last-child(2)){padding-bottom:10px}.inputRowsEndElement{clear:"both";float:"left"}.startWordRowContainer{padding-bottom:20px;width:100%}.endWordRowContainer{padding-top:20px;width:100%}.block{align-items:center;display:inline-flex;font-size:2rem;font-weight:700;height:60px;justify-content:center;outline:2px solid var(--light-gray);text-transform:uppercase;width:60px}.row .block:not(:last-child){margin-right:10px}.filledBlock{color:#000}.currentBlock,.transitionBlock{outline-color:#000}.correctBlock{background-color:var(--light-green)}.endWordBlock,.startWordBlock{background-color:var(--light-gray);color:#000}.endWordBlockComplete{background-color:green;color:#fff;outline-color:green}.exampleWordBlock{background-color:var(--light-gray);color:#000}.bouncingBlock{-webkit-animation:bounce 2s infinite;animation:bounce 2s infinite}.endWordRow .bouncingBlock:first-child{-webkit-animation-delay:50ms;animation-delay:50ms}.endWordRow .bouncingBlock:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.endWordRow .bouncingBlock:nth-child(3){-webkit-animation-delay:.15s;animation-delay:.15s}.endWordRow .bouncingBlock:nth-child(4){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes bounce{0%{-webkit-transform:translateY(0);transform:translateY(0)}10%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}20%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounce{0%{-webkit-transform:translateY(0);transform:translateY(0)}10%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}20%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.clearBoardButton{background:none;border:none;cursor:pointer;font-size:1rem;margin-top:10px}.gameHeader{align-items:center;border-bottom:1px solid var(--light-gray);display:flex;flex-direction:row;height:var(--header-height);justify-content:space-between;padding:0 10px}.gameHeaderLeftGroup{display:flex;flex-direction:row;justify-content:flex-start;width:70px}.gameHeaderRightGroup{display:flex;flex-direction:row;justify-content:flex-end;width:70px}.gameTitle{font-size:2.2rem;font-weight:700;overflow:hidden;white-space:nowrap}.yesterdayButton{background:none;border:none;cursor:pointer;padding:0 4px}.yesterdayButton svg{height:24px;width:24px}.userStatsButton{background:none;border:none;cursor:pointer;padding:0 4px}.userStatsButton svg{height:24px;width:24px}.howToPlayButton{background:none;border:none;cursor:pointer;padding:0 4px}.howToPlayButton svg{height:24px;width:24px}.overlay{align-items:center;background-color:var(--opacity-50);display:none;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1000}.overlayOpen{display:flex}.overlayContent{display:flex;height:100%;justify-content:center;width:100%}.modal{align-items:center;align-self:center;background-color:#fff;border-radius:4px;box-shadow:0 0 10px 10px rgba(0,0,0,.2);display:flex;flex-direction:column;max-height:90%;max-width:var(--max-game-width);overflow:auto;padding:10px 0 20px;width:90%}.modalContent{overflow:auto;width:100%}.modalHeaderRow{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:10px;width:100%}.modalTitle{font-size:2rem;font-weight:700;justify-self:center}.dummyLeftItem{width:50px}.closeModalButton{align-self:start;background:none;border:none;cursor:pointer;width:50px}.closeModalButton svg{height:24px;width:24px}#gameStatsModalContent{align-items:center;display:flex;flex-direction:column}.todayUserStatsRow{margin-bottom:10px}.historicalUserStatsRow,.todayUserStatsRow{display:flex;flex-direction:row}.userStat{align-items:center;display:flex;flex-direction:column;width:100px}.userStatsBlock{background-color:var(--light-gray);color:#000}.successUserStatsBlock{background-color:green;color:#fff;outline-color:green}.userStatLabel{font-size:1rem;padding-top:4px;text-align:center}.shareTodaysScoreButtonContainer{display:flex;flex-direction:column;height:60px;justify-content:center}.shareTodaysScoreButton{fill:#fff;align-items:center;background:rgba(0,128,0,.8);border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;flex-direction:row;font-size:1rem;font-weight:700;height:40px;justify-content:center;width:100px}.shareButtonText{margin-right:4px}.shareTodaysScoreButton svg{height:24px;width:24px}.shareTodaysScoreButtonCounterDummyDiv{height:50px;width:100px}#howToPlayModalContent{display:flex;flex-direction:column;padding:0 10px}.howToPlayHistorySection{padding-bottom:5px}.howToPlaySentenceBlock{padding:0 10px 5px}.howToPlayExampleTitle{font-size:1.2rem;font-weight:700;padding-bottom:5px}.howToPlayExampleSection .howToPlaySentenceBlock{padding:5px 0;text-align:center}.howToPlayExampleGameRow .block{font-size:1.5rem;height:40px;width:40px}.yesterdayModalContentContainer{align-items:center;display:flex;flex-direction:column;width:100%}.yesterdayOptimalText{color:gray;font-size:1rem;margin-bottom:10px;text-align:center}.yesterdayGameBoardContainer{width:100%}.yesterdayGameBoardContainer .yesterdayGameBoardRow:not(:last-child){padding-bottom:10px}.yesterdayExplanation{color:gray;font-size:1rem;margin-top:10px;text-align:center}
.content-profile {
    text-align: center;
    color: rgb(148, 35, 35);  
    font-weight: bold;
   
}

.content-profile2 {
    text-align: center;
    font-weight: bold;
  }
  .content-profile3 {
    text-align: center;
    color: rgb(148, 35, 35);  
    font-weight: bold;
    font-size: 22px;
   
}

  
.ad-main-index {
    position: absolute;
    bottom: var(--safe-area-inset-bottom);
    width: 100%;
}

.sponsored {
    font-size: 10px;
    font-weight: 700;
    margin: 8px 0 0 0;
    justify-content: center;
    text-align: center;
    color: var(--color-tone-2);
    background-color: var(--color-tone-5);
    height: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
}

.ad-main {
    margin-top: 0;
    background-color: var(--color-tone-5);
}

@media only screen and (max-height : 630px) {
    :root {
        --game-height: calc(100% - var(--safe-area-inset-bottom)) !important;
    }
}



@media only screen and (max-width : 910px) {
    :root {
        --game-height: calc(100% - var(--safe-area-inset-bottom) - var(--ad-height) - 40px);
        /*Replace*/
        /*--game-height: calc(100% - var(--safe-area-inset-bottom) - var(--ad-height) - 15px);*/
    }
}

@media only screen and (min-width : 910px) {
    :root {
        --game-height: calc(100% - var(--safe-area-inset-bottom));
    }

    .ad-main,
    .sponsored {
        display: none !important;
    }
}

@media only screen and (min-height : 630px) and (max-height : 650px) {
    :root {
        --ad-height: 40px !important;
        --game-height: calc(100% - var(--safe-area-inset-bottom) - var(--ad-height) - 30px);
        /*--game-height: calc(100% - var(--safe-area-inset-bottom) - var(--ad-height) - 30px);
                /*Replace*/
    }

    .sponsored {
        font-size: 10px;
        height: 15px;
        margin: 15px 0 0 0;

    }
}

.responsive {
    width: 100%;
    height: auto;
  }

@media only screen and (min-height : 650px) and (max-height : 670px) {
    :root {
        --ad-height: 50px !important;
    }
}

@media only screen and (max-width : 910px) {

    .ad-left,
    .ad-right {
        display: none !important;
    }
}

@media only screen and (min-width : 910px) {
    .ad-left {
        position: absolute !important;
        left: 0;
        margin: auto 0;
        top: 500px;
        bottom: 0;
        align-items: center;
        width: calc(50% - var(--game-max-width)/2);
    }

    .ad-right {
        position: absolute !important;
        right: 0;
        margin: auto 0;
        top: 500px;
        bottom: 0;
        align-items: center;
        width: calc(50% - var(--game-max-width)/2);
    }
    .responsive {
        width: 50%;
        height: auto;
        display:block;
        margin:auto;
      }
}

@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 60px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 60px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 60px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        top: 60px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

img.alineadoTextoImagenCentro{
    vertical-align: middle;
    /* Ojo vertical-align: text-middle no existe*/
  }



  