@font-face {
    font-family: "EMprint Semibold";
    src: url("../font/emprint_semibold.eot");
    src: url("../font/emprint_semibold.eot?#iefix")format("embedded-opentype"),
        url("../font/emprint_semibold.woff2")format("woff2"),
        url("../font/emprint_semibold.woff")format("woff"),
        url("../font/emprint_semibold.ttf")format("truetype"),
        url("../font/emprint_semibold.svg#EMprint Semibold")format("svg");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "EMprint Semibold Italic";
    src: url("../font/emprint_semibold_italic.eot");
    src: url("../font/emprint_semibold_italic.eot?#iefix")format("embedded-opentype"),
        url("../font/emprint_semibold_italic.woff2")format("woff2"),
        url("../font/emprint_semibold_italic.woff")format("woff"),
        url("../font/emprint_semibold_italic.ttf")format("truetype"),
        url("../font/emprint_semibold_italic.svg#EMprint Semibold Italic")format("svg");
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "EMprint Bold";
    src: url("../font/emprint_bold.eot");
    src: url("../font/emprint_bold.eot?#iefix")format("embedded-opentype"),
        url("../font/emprint_bold.woff2")format("woff2"),
        url("../font/emprint_bold.woff")format("woff"),
        url("../font/emprint_bold.ttf")format("truetype"),
        url("../font/emprint_bold.svg#EMprint Bold")format("svg");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "EMprint Bold Italic";
    src: url("../font/emprint_bold_italic.eot");
    src: url("../font/emprint_bold_italic.eot?#iefix")format("embedded-opentype"),
        url("../font/emprint_bold_italic.woff2")format("woff2"),
        url("../font/emprint_bold_italic.woff")format("woff"),
        url("../font/emprint_bold_italic.ttf")format("truetype"),
        url("../font/emprint_bold_italic.svg#EMprint Bold Italic")format("svg");
    font-style: italic;
    font-weight: bold;
}

:root {
    --main-theme-font-semibold: 'EMprint Semibold', sans-serif;
    --main-theme-font-semibolditalic: 'EMprint Semibold Italic', sans-serif;
    --main-theme-font-bold: 'EMprint Bold', sans-serif;
    --main-theme-font-bolditalic: 'EMprint Bold Italic', sans-serif;
    --main-theme-red-color: #fe000c;
    --main-theme-blue-color: #0c479d;
    --main-theme-text-stroke: max(0.8vh, 6px);
}

* {
    padding: 0;
    margin: 0;
}

html,
body {
    max-width: 100%;
}

main {
    background-color: black;
    position: relative;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    overflow: hidden;
}

#game-container {
    position: absolute;
    width: calc(100vh * 9 / 19.5);
    height: 100vh;
    left: calc(50% - (50vh * 9 / 19.5));
    top: 0;
    overflow: hidden;
}

@media only screen and (max-width: 767px) and (orientation:portrait) {
    #game-container {
        width: 100vw;
        height: calc(100vw * 19.5 / 9);
        left: 0;
    }
}

.hide {
    opacity: 0;
}

.t1e,
.t2e,
.t3e,
.t4e,
.t5e,
.t6e,
.t7e,
.t8e,
.t9e {
    visibility: hidden;
}

.tab1-display .t1e,
.tab2-display .t2e,
.tab3-display .t3e,
.tab4-display .t4e,
.tab5-display .t5e,
.tab6-display .t6e,
.tab7-display .t7e,
.tab8-display .t8e,
.tab9-display .t9e {
    visibility: visible;
}

button {
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    outline: none;
    cursor: pointer;
}

a {
    background: transparent;
    border: 0;
    outline: none;
    text-decoration: none;
    cursor: pointer;
}

img {
    display: block;
    -webkit-user-drag: none;
}

span,
p,
h1,
h2 {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.backbone {
    display: block;
    position: relative !important;
    width: 100%;
}

.samesize {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.shading {
    background-size: 100% 100%;
    background-position: left bottom;
    mix-blend-mode: multiply;
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

.signboard {
    position: absolute;
    width: 100%;
    left: 0%;
    top: 5.5%;
}

.traffic-lights {
    display: flex;
    position: absolute;
    width: 11%;
    height: 34.7%;
    left: 22%;
    top: 99.1%;
    flex-flow: row nowrap;
    gap: 0;
}

.traffic-lights>.light {
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0 0;
    display: inherit;
    position: relative;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
}

.traffic-lights>.light.on {
    background-position: 100% 0;
}

.esso-logo {
    position: absolute;
    width: 26.3%;
    left: 36.9%;
    top: 15.9%;
}

.f1-txt1 {
    position: absolute;
    width: 95.3%;
    left: 2.3%;
    top: 30%;
}

.f1-txt2 {
    position: absolute;
    width: 75%;
    left: 12.3%;
    top: 35.4%;
}

.f1-howtoplay {
    position: absolute;
    width: 96.7%;
    left: 1.6%;
    top: 42.5%;
}

.f1-btn-start {
    position: absolute;
    width: 49%;
    left: 25.7%;
    top: 60.2%;
    cursor: pointer;
}

.f2-txt1 {
    position: absolute;
    width: 84.9%;
    left: 7.5%;
    top: 30.7%;
}

@keyframes blinkText {

    90%,
    100% {
        transform: scale(1.03, 1.03);
        -webkit-transform: scale(1.03, 1.03);
        opacity: 1;
    }
}

.f2-txt1.start-anim .samesize {
    -webkit-transform-origin: 78.3% 50%;
    transform-origin: 78.3% 50%;
    animation: blinkText 0.25s 0.1s alternate infinite;
}

.f2-timer-value {
    position: absolute;
    width: auto;
    min-width: 100%;
    height: 9.8%;
    text-align: center;
    left: 0%;
    top: 37.6%;
    color: var(--main-theme-blue-color);
    letter-spacing: -0.04em;
    font-size: clamp(14vh, 120px, 30vw);
    line-height: 0.72em;
    font-family: var(--main-theme-font-semibolditalic);
}

.f2-box-besttime {
    position: absolute;
    width: 44.1%;
    left: 2.7%;
    top: 51.7%;
}

.f2-box-round {
    position: absolute;
    width: 44.5%;
    left: 49.9%;
    top: 51.7%;
}

.f2-box-besttime .txt,
.f2-box-round .txt {
    display: flex;
    position: absolute;
    width: 83.4%;
    left: 8.8%;
    top: 53.2%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    letter-spacing: -0.02em;
    font-size: clamp(3vh, 26px, 7vw);
    line-height: 0.8em;
    font-family: var(--main-theme-font-semibold);
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.f2-box-besttime .txt {
    color: var(--main-theme-red-color);
}

.f2-box-round .txt {
    color: var(--main-theme-blue-color);
}

.f2-txt2 {
    position: absolute;
    width: 84.7%;
    left: 7.5%;
    top: 30.7%;
}

.f2-txt2.start-anim .samesize {
    -webkit-transform-origin: 22.1% 50%;
    transform-origin: 22.1% 50%;
    animation: blinkText 0.25s 0.1s alternate infinite;
}

.f2-txt-reflect {
    position: absolute;
    width: 100%;
    left: 0%;
    top: 30.9%;
    text-align: center;
    color: var(--main-theme-red-color);
    letter-spacing: -0.04em;
    font-size: clamp(5vh, 36px, 9.6vw);
    line-height: 0.72em;
    font-family: var(--main-theme-font-bolditalic);
    text-shadow: var(--main-theme-text-stroke) 0 #fff, calc(var(--main-theme-text-stroke) * -1) 0 #fff, 0 2px #fff, 0 calc(var(--main-theme-text-stroke) * -1) #fff, calc(var(--main-theme-text-stroke) * 0.5) calc(var(--main-theme-text-stroke) * 0.5) #fff, calc(var(--main-theme-text-stroke) * -0.5) calc(var(--main-theme-text-stroke) * -0.5) #fff, calc(var(--main-theme-text-stroke) * 0.5) calc(var(--main-theme-text-stroke) * -0.5) #fff, calc(var(--main-theme-text-stroke) * -0.5) calc(var(--main-theme-text-stroke) * 0.5) #fff;
}

.f2-txt-reflect span {
    display: block;
}

@supports (-webkit-text-stroke: var(--main-theme-text-stroke) white) {
    .f2-txt-reflect {
        -webkit-text-fill-color: var(--main-theme-red-color);
        -webkit-text-stroke: var(--main-theme-text-stroke) white;
        text-shadow: none;
    }

    .f2-txt-reflect span {
        position: absolute;
        color: var(--main-theme-red-color);
        -webkit-text-stroke: 0;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
    }
}

.f3-txt1 {
    position: absolute;
    width: 76.9%;
    left: 10.5%;
    top: 31.9%;
}

.f3-warning {
    position: absolute;
    width: 86.6%;
    left: 5.5%;
    top: 41.7%;
}

.f3-btn-continue {
    position: absolute;
    width: 49.1%;
    left: 23.2%;
    top: 53.8%;
}

.f4-talents {
    position: absolute;
    width: 134.3%;
    left: -13.4%;
    top: 50.3%;
    z-index: 1;
}

.f4-talents .samesize {
    z-index: 1;
}

.f4-talents .backbone {
    z-index: 0;
}

.f4-tnc {
    position: absolute;
    width: 71.6%;
    left: 2.2%;
    top: 97vh;
    z-index: 2;
    pointer-events: none;
}

.f4-result-1,
.f4-result-2,
.f4-result-3,
.f5-result-4 {
    position: absolute;
    width: 99.5%;
    left: -14.4%;
    top: 26.3%;
}

.f4-promo-1,
.f4-promo-2,
.f4-promo-3,
.f5-promo-4 {
    position: absolute;
    width: 106.4%;
    left: -3.2%;
    top: 34%;
}

.header-lvl1,
.header-lvl2,
.header-lvl3,
.header-fail {
    position: absolute;
    width: 100%;
    left: 0%;
    top: 0%;
}

.f4-btn-download {
    position: absolute;
    width: 42.3%;
    left: 5.1%;
    top: 89.5vh;
}

.f4-btn-download {
    position: absolute;
    width: 42.3%;
    left: 5.1%;
    top: calc(89.5vh - 15px);
    z-index: 100;
}

.f4-btn-share {
    position: absolute;
    width: 42.3%;
    left: 52.4%;
    top: calc(89.5vh - 15px);
    z-index: 100;
}

.f4-share-container {
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 120vh;
    opacity: 0;
    z-index: 9999;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s 0.6s ease;
}

.tabshare-display .f4-share-container {
    top: 0;
    opacity: 1;
    transition: opacity 0.3s 0s ease;
}

.f4-share-panel {
    display: inherit;
    position: relative;
    width: 76%;
    min-height: 200px;
    box-sizing: border-box;
    padding: 50px 20px 30px;
    top: -5%;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
}

.f4-bg-share-panel {
    display: block;
    background-color: #ffffff;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.f4-title-share-panel {
    position: absolute;
    width: 50.1%;
    left: 6.1%;
    top: -20px;
}

.f4-btn-close-panel {
    position: absolute;
    width: 14.5%;
    left: 82%;
    top: -20px;
}

.f4-share-btn {
    display: inherit;
    position: relative;
    width: calc(25% - 6px);
    flex-basis: calc(25% - 6px);
    align-items: center;
    justify-content: center;
}

.f5-btn-retry {
    position: absolute;
    width: 42.3%;
    left: 28.9%;
    top: calc(89.5vh - 15px);
    z-index: 100;
}

.confetti {
    position: absolute;
    width: 9.7%;
    left: 12%;
    top: 43.8%;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

@keyframes startConfetti0 {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(0.3, 0.3);
    }

    12%,
    40% {
        transform: scale(1.2, 1.2);
    }

    72%,
    100% {
        transform: scale(1, 1);
    }
}

.tab6-display .start-anim .confetti {
    animation: startConfetti0 3s 0.25s infinite;
}

@keyframes startConfetti1 {

    0%,
    12% {
        transform: scale(0, 0) rotate(10deg) translate(0%, 0%);
        opacity: 0;
    }

    18%,
    22% {
        transform: scale(1.2, 1.2) rotate(0deg) translate(0%, 0%);
        opacity: 1;
    }

    72%,
    100% {
        transform: scale(1, 1) rotate(10deg) translate(0%, 0%);
        opacity: 0;
    }
}

.confetti-1 {
    position: absolute;
    width: 7.2%;
    left: 18.8%;
    top: 26.4%;
    opacity: 0;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.tab6-display .start-anim .confetti-1 {
    animation: startConfetti1 3s 0.25s infinite;
}

.confetti-2 {
    position: absolute;
    width: 5%;
    left: 14.2%;
    top: 31.7%;
    opacity: 0;
    -webkit-transform-origin: 40% 100%;
    transform-origin: 40% 100%;
}

@keyframes startConfetti2 {

    0%,
    12% {
        transform: scale(0, 0) rotate(-5deg) translate(0%, 0%);
        opacity: 0;
    }

    15%,
    19% {
        transform: scale(1.2, 1.2) rotate(0deg) translate(0%, 0%);
        opacity: 1;
    }

    75%,
    100% {
        transform: scale(1, 1) rotate(-5deg) translate(0%, 0%);
        opacity: 0;
    }
}

.tab6-display .start-anim .confetti-2 {
    animation: startConfetti2 3s 0.25s infinite;
}

.confetti-3 {
    position: absolute;
    width: 8.6%;
    left: 18.1%;
    top: 52.4%;
    opacity: 0;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

@keyframes startConfetti3 {

    0%,
    12% {
        transform: scale(0, 0) rotate(10deg) translate(0%, 0%);
        opacity: 0;
    }

    18%,
    22% {
        transform: scale(1.2, 1.2) rotate(0deg) translate(0%, 0%);
        opacity: 1;
    }

    72%,
    100% {
        transform: scale(1, 1) rotate(10deg) translate(0%, 0%);
        opacity: 0;
    }
}

.tab6-display .start-anim .confetti-3 {
    animation: startConfetti3 3s 0.25s infinite;
}

.medal {
    position: absolute;
    width: 11.4%;
    left: 14.2%;
    top: 26.4%;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

@keyframes swingMedal {

    0%,
    34%,
    100% {
        transform: skew(-0.152rad);
    }

    67% {
        transform: skew(0.152rad);
    }
}

.tab7-display .start-anim .medal {
    animation: swingMedal 0.5s 0.25s infinite;
}

.trophy {
    position: absolute;
    width: 13.9%;
    left: 12.3%;
    top: 26.9%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

@keyframes revolveTrophy {

    0%,
    85%,
    100% {
        transform: scale(1, 1) rotate(0deg);
    }

    6%,
    22%,
    36%,
    72%,
    76% {
        transform: scale(1, 0.96) rotate(0deg);
    }

    26%,
    32% {
        transform: scale(1.06, 1.06) rotate(-3deg) translate(-2%, 2%);
    }

    62%,
    66% {
        transform: scale(1.06, 1.06) rotate(3deg) translate(2%, 2%);
    }

}

.tab8-display .start-anim .trophy {
    animation: revolveTrophy 2s 0.25s infinite;
}

.muscle {
    position: absolute;
    width: 17%;
    left: 13.8%;
    top: 28.4%;
    -webkit-transform-origin: 70% 90%;
    transform-origin: 70% 90%;
}

@media only screen and (orientation : landscape) {
    .f2-timer-value {
        font-size: 4vw;
    }

    .f2-box-besttime .txt,
    .f2-box-round .txt {
        font-size: 1.4vw;
    }
}