/* Common - Standard */

@font-face {
    font-family: 'TradeGothicNextLTPro-Hv';
    src:  url(../fonts/TradeGothicNextLTPro-Hv.woff2) format('woff2'),
            url(../fonts/TradeGothicNextLTPro-Hv.woff) format('woff');
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    color: #fff;
    font-size: 3.8vw;
    line-height: 5.33vw;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
    background-color: #fff;
}

p {
    color: #fff;
    font-size: 3.8vw;
    line-height: 5.33vw;
}

body {
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: white;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

.unselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

@media screen and (min-width: 420px) {

    html {
        font-size: 16px;
        line-height: 22.4px;
    }

    p {
        font-size: 16px;
        line-height: 22.4px;
    }
}


/* Hyperlinks */

a:link {
    color: #fff;
}

a:visited {
    color: #fff;
}

a:hover {
    color: #000;
}

a:active {
    color: #fff;
}


/* Common - Custom */

.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

.display-block {
    display: block;
    max-width: 100%;
}

.page {
    position: relative;
}

.div-absolute-full-width {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    pointer-events: none;
}

.div-absolute-centered {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

/* Common to all Screens */

.page-title {
    font-family: 'TradeGothicNextLTPro-Hv';
    font-size: 6.90vw;
    top: 30.23vw;
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
}
.page-title-day {
    color: #c74b26;
}
.page-title-night {
    color: #6cd9ff;
}
.page-title span {
    color: #fff;
}

.button {
    color: #fff;
    border: 0px;
    transition: transform .2s; /* Animation */
}
.button:visited {
    transform: scale(1);
}
.button:hover, .button:active {
    transform: scale(0.95);
}

@media screen and (min-width: 420px) {
    .page-title {
        font-size: 29px;
        top: 127px;
    }
}

/* Landing Page */

.landing-play-button {
    width: 52.38vw;
    height: 12.85vw;
}
.landing-play-button-day {
    top: 145.71vw;
    background: url(../img/day/button-play.png) center no-repeat;
    background-size: contain;
}
.landing-play-button-night {
    top: 145.71vw;
    background: url(../img/night/button-play.png) center no-repeat;
    background-size: contain;
}

@media screen and (min-width: 420px) {
    .landing-play-button {
        width: 220px;
        height: 54px;
    }
    .landing-play-button-day {
        top: 612px;
    }
    .landing-play-button-night {
        top: 612px;
    }
}


/* Instructions Page */

.instructions-title {
    font-size: 5.95vw;
}
.instructions-sub-title {
    font-size: 5vw;
    top: 61.66vw;
}

.instructions-start-button {
    width: 52.38vw;
    height: 12.85vw;
}
.instructions-start-button-day {
    top: 140.23vw;
    background: url(../img/day/button-start.png) center no-repeat;
    background-size: contain;
}
.instructions-start-button-night {
    top: 140.23vw;
    background: url(../img/night/button-start.png) center no-repeat;
    background-size: contain;
}

@media screen and (min-width: 420px) {
    .instructions-title {
        font-size: 25px;
    }
    .instructions-sub-title {
        font-size: 21px;
        top: 259px;
    }
    .instructions-start-button {
        width: 220px;
        height: 54px;
    }
    .instructions-start-button-day {
        top: 589px;
    }
    .instructions-start-button-night {
        top: 589px;
    }
}

/* Unlocked Page */

.unlocked-title {
    font-size: 5.95vw;
}

.unlocked-char-name-day {
    top: 41.33vw;
    font-size: 8.57vw;
    color: #574a43;
}
.unlocked-char-name-night {
    top: 48.09vw;
    font-size: 8.57vw;
    color: #fff;
}
 
.unlocked-char-day {
    width: 62.38vw;
    top: 56.66vw;
}
.unlocked-char-night {
    width: 62.38vw;
    top: 63.33vw;
}

.unlocked-gacha-again-button {
    width: 52.38vw;
    height: 12.85vw;
}
.unlocked-gacha-again-button-day {
    top: 125.47vw;
    background: url(../img/day/button-gacha-again-1.png) center no-repeat;
    background-size: contain;
}
.unlocked-gacha-again-button-night {
    top: 129.52vw;
    background: url(../img/night/button-gacha-again-1.png) center no-repeat;
    background-size: contain;
}

.unlocked-tweet-button {
    width: 52.38vw;
    height: 12.85vw;
}
.unlocked-tweet-button-day {
    top: 140.71vw;
    background: url(../img/day/button-tweet.png) center no-repeat;
    background-size: contain;
}
.unlocked-tweet-button-night {
    top: 144.76vw;
    background: url(../img/night/button-tweet.png) center no-repeat;
    background-size: contain;
}

@media screen and (min-width: 420px) {
    .unlocked-title {
        font-size: 25px;
    }
    .unlocked-char-name-day {
        top: 173px;
        font-size: 36px;
    }
    .unlocked-char-name-night {
        top: 202px;
        font-size: 36px;
    }
    .unlocked-char-day {
        width: 262px;
        top: 238px;
    }
    .unlocked-char-night {
        width: 262px;
        top: 266px;
    }
    .unlocked-gacha-again-button {
        width: 220px;
        height: 54px;
    }
    .unlocked-gacha-again-button-day {
        top: 527px;
    }
    .unlocked-gacha-again-button-night {
        top: 544px;
    }
    .unlocked-tweet-button {
        width: 220px;
        height: 54px;
    }
    .unlocked-tweet-button-day {
        top: 591px;
    }
    .unlocked-tweet-button-night {
        top: 608px;
    }
}


/* Failed Page */

.failed-title-day {
    color: #c74b26;
    top: 72.61vw;
}
.failed-title-night {
    color: #3c8b8c;
    top: 72.61vw;
}
.failed-subtitle-day {
    top: 92.38vw;
    color: #574a43;
}
.failed-subtitle-night {
    top: 99.04vw;
    color: #27476a;
}

.failed-gacha-again-button {
    width: 52.38vw;
    height: 12.85vw;
}
.failed-gacha-again-button-day {
    top: 106.42vw;
    background: url(../img/day/button-gacha-again-2.png) center no-repeat;
    background-size: contain;
}
.failed-gacha-again-button-night {
    top: 112vw;
    background: url(../img/night/button-gacha-again-2.png) center no-repeat;
    background-size: contain;
}

@media screen and (min-width: 420px) {

    .failed-title-day {
        top: 305px;
    }
    .failed-title-night {
        top: 305px;
    }
    .failed-subtitle-day {
        top: 388px;
    }
    .failed-subtitle-night {
        top: 416px;
    }
    .failed-gacha-again-button {
        width: 220px;
        height: 54px;
    }
    .failed-gacha-again-button-day {
        top: 447px;
    }
    .failed-gacha-again-button-night {
        top: 470px;
    }
}




/* Countdown */

.countdown-container {
    display: flex;
    justify-content: center;
}

.countdown {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 84.28vw;
}

.countdown-number {
    font-family: 'TradeGothicNextLTPro-Hv';
    font-size: 9.04vw;
    text-align: center;
    color: #fff;
}

.countdown-svg {
    margin-top: 79.76vw;
    width: 33.33vw;
    height: 33.33vw;
    transform: rotate(-90deg);
}

.circle-behind {
    /* stroke-dasharray with calc() doesn't work on iOS */
    stroke-dasharray: calc(2 * 22 / 7 * 40%); 
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 1.9vw;
    fill: transparent;
}
.circle-behind-day {
    stroke: rgba(255, 255, 255, 0.5);
}
.circle-behind-night {
    stroke: rgba(255, 255, 255, 0.5);
}

.circle {
    /* stroke-dasharray with calc() doesn't work on iOS */
    stroke-dasharray: calc(2 * 22 / 7 * 40%);
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 1.9vw;
    fill: transparent;
}
.circle-day {
    stroke: rgba(255, 255, 255, 1);
}
.circle-night {
    stroke: rgba(255, 255, 255, 1);
}

.circle-animation {
    animation: countdown 8s linear infinite forwards;
}
.go-animation {
    animation: zoomin 0s;
}
.countdown-animation {
    animation: zoomin 0s;
}

@keyframes countdown {
    from {
        stroke-dashoffset: 0px;
    }
    to {
        /* stroke-dashoffset with calc() doesn't work on iOS */
        stroke-dashoffset: calc(2 * 22 / 7 * 40%);
    }
}

@keyframes zoomin {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.2);
        opacity: 0;
    }
}

@media screen and (min-width: 420px) {
    .countdown {
        margin-top: 354px;
    }
    .countdown-number {
        font-size: 38px;
    }
    .countdown-svg {
        margin-top: 335px;
        width: 140px;
        height: 140px;
    }
    .circle-behind {
        stroke-width: 8px;
    }
    .circle {
        stroke-width: 8px;
    }
}