body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    margin: 0;
    padding: 0;
}

.loading {
    background-image: url("data:image/gif;base64,R0lGODlhJQAlAJECAL3L2AYrTv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAAJQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaMk+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iGxcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nLXAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEADAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQFCgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnAagwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoACwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQFCgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWEj6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwBABEADAADAAACBYSPqcsFADs=");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 60%;
}

.start_btn{
    display:inline-block;
    margin:0 auto;
    width:8em;
    height:1.7em;
    line-height:1.7em;
    font-size:2.2em;
    color:#fff;
}

.SHADE {
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 11;
}

.BOX-V {
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
}

.BOX-D {
    box-align: end;
    box-pack: center;
    -webkit-box-align: end;
    -webkit-box-pack: center;
    -ms-flex-align: end;
    -ms-flex-pack: center;
}

.BOX-M {
    box-align: center;
    box-pack: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
}

.BOX-S {
    display: block;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
}

.BOX,
.BOX-V,
.BOX-D,
.BOX-M,
.FOOTER {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
}

.BBOX,
.BOX,
.APP-STAGE,
.INSET-STAGE,
.STAGE,
.PAGE-STAGE,
.PAGE,
.PAGE-BOX,
.INSET-PAGE,
.FOOTER {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}


#welcome {
    background-color: rgba(0, 0, 0, .8);
    text-align: center;
    font-weight: bold;
    overflow: hidden;
}

.welcome-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    opacity: .4;
    overflow: hidden;
}

#GameTimeLayer {
    top: 1em;
    left: 0;
    width: 100%;
    text-align: center;
    color: rgb(233, 138, 131);
    font-size: 4em;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    overflow: hidden;
}

#GameLayerBG {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #fff;
}

.GameLayer {
    position: absolute;
    bottom: 0;
    left: 0;
}

.block {
    position: absolute;
    border-top: 1px solid #b8dfe6;
    background-repeat: no-repeat;
    background-position: center;
}

.t1,
.t2,
.t3,
.t4,
.t5 {
    background-size: auto 100%;
    background-image: var(--game-image-before, url(./image/ClickBefore.png));
}

.tt1,
.tt2,
.tt3,
.tt4,
.tt5 {
    background-size: auto 86%;
    background-image: var(--game-image-after, url(./image/ClickAfter.png));
}

.bl {
    border-left: 1px solid #b8dfe6;
}

@-ms-keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.flash {
    -webkit-animation: flash .2s 3;
    animation: flash .2s 3;
}

.bad {
    background-color: rgb(211, 91, 91);
    -webkit-animation: flash .2s 3;
    animation: flash .2s 3;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-user-select: none;
}

#GameScoreLayer {
    padding-top: 2em;
    font-size: 2em;
    font-weight: bold;
    color: #251c1c;
    text-align: center;
    overflow: hidden;
}

.share-icon {
    width: 1.7em;
    background-repeat: no-repeat;
    background-size: auto 100%;
}



#GameScoreLayer-btn .btn,
#GameScoreLayer-share .btn {
    text-align: center;
    font-size: 1.1em;
    color: rgba(0, 0, 0, 0.3);
    height: 2em;
    line-height: 2em;
}

.btn:active {
    opacity: 0.2;
}

#landscape {
    display: none;
}

#gameBody {
    position: relative;
    width: 640px;
    margin: 0 auto;
}

#share-wx {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    display: none;
}

#btn_group {
    width: min(88%, 480px);
    max-width: 480px;
}

@media (max-width: 450px) {
    #btn_group {
        max-width: 92% !important;
    }
}

@media (max-width: 600px) {
    #btn_group {
        max-width: 92%;
    }
}

@media (max-width: 800px) {
    #btn_group {
        max-width: 92%;
    }
}

#welcome .game-title { margin-bottom: .5rem; color: #fef002; font-size: 2em; line-height: 1.2; }
#welcome #desc { display: block; color: #fff; font-size: 1.45em; line-height: 1.35; }
#welcome .mb-5 { margin-bottom: 1.5rem; }
#btn_group > .d-flex > .btn-lg, #btn_group > .d-flex > .form-select { font-size: 1rem; }
#setting.game-settings { box-sizing: border-box; width: 100%; margin-top: .25rem; padding: .5rem 0 0; border-radius: 0; background: transparent; }
.game-settings #sound { width: 100%; margin-bottom: .5rem; font-size: .85rem; }
.setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.setting-grid .input-group { margin: 0; }
.setting-grid .input-group-text { min-width: 2.8rem; padding: .3rem .45rem; font-size: .8rem; text-align: center; }
.setting-grid .form-control { padding: .3rem .45rem; font-size: .8rem; }
@media (max-width: 600px) { .setting-grid { grid-template-columns: 1fr; } }

#GameScoreLayer .col-3, #GameScoreLayer .col-2 {
    max-width: 144px;
}

.dropdown-item {
    cursor: pointer;
}

/* Local UI styles replacing the Bootstrap subset used by this small site. */
.container { width: 100%; margin: 0 auto; box-sizing: border-box; }
.btn { display: inline-block; box-sizing: border-box; border: 1px solid transparent; border-radius: .25rem; padding: .375rem .75rem; font: inherit; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; }
.btn-primary { color: #fff; background: #0d6efd; border-color: #0d6efd; }
.btn-secondary { color: #fff; background: #6c757d; border-color: #6c757d; }
.form-select, .form-control { box-sizing: border-box; border: 1px solid #ced4da; border-radius: .25rem; padding: .375rem .75rem; font: inherit; line-height: 1.5; background: #fff; }
.form-select { width: 100%; color: #212529; }
.input-group { display: flex; width: 100%; }
.input-group-text { display: block; box-sizing: border-box; height: 100%; padding: .375rem .75rem; color: #212529; background: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem 0 0 .25rem; }
.input-group .form-control { min-width: 0; flex: 1; border-radius: 0 .25rem .25rem 0; }
.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-fill { flex: 1; }
.justify-content-center { justify-content: center; }
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-nowrap { white-space: nowrap; }
.w-100 { width: 100%; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 3rem; }
.col-2 { width: 16.666667%; }
.col-3 { width: 25%; }
.navbar { padding: .5rem 1rem; }
.navbar-light { color: #212529; }
.bg-light { background: #f8f9fa; }
.navbar-brand { color: #212529; font-size: 1.25rem; text-decoration: none; }
.navbar-source { float: right; color: #0d6efd; text-decoration: none; line-height: 1.875rem; }
.list-group { display: flex; flex-direction: column; padding: 0; }
.list-group-item { display: block; padding: .75rem 1.25rem; border: 1px solid rgba(0, 0, 0, .125); margin-bottom: -1px; }
.pagination { display: flex; padding-left: 0; list-style: none; }
.page-item.active .page-link { color: #fff; background: #0d6efd; border-color: #0d6efd; }
.page-link { display: block; padding: .375rem .75rem; color: #0d6efd; text-decoration: none; background: #fff; border: 1px solid #dee2e6; }
.rank-card { padding: 1.25rem; }
.rank-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rank-header h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: #111; }
.rank-header time { color: #555; font-size: .9rem; white-space: nowrap; }
.rank-score { margin: 1rem 0 .35rem; font-weight: 700; font-size: 1.05rem; }
.rank-score span { margin-left: .75rem; }
.rank-network { margin: 0; color: #495057; font-size: .95rem; line-height: 1.6; word-break: break-word; }
.rank-message { margin: .75rem 0 0; color: #212529; }
.rank-card { position: relative; padding-bottom: 2.5rem; }
.profile-edit { position: absolute; right: 1rem; bottom: .8rem; border: 0; background: transparent; color: #6c757d; font-size: 1.1rem; cursor: pointer; }
.profile-edit:hover { color: #0d6efd; }
#profile-dialog { width: min(90vw, 360px); border: 0; border-radius: .5rem; padding: 1.25rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
#profile-dialog::backdrop { background: rgba(0, 0, 0, .5); }
#profile-dialog h2 { margin-top: 0; font-size: 1.2rem; }
#profile-dialog label { display: block; margin-top: .75rem; font-weight: 700; }
#profile-dialog input { box-sizing: border-box; width: 100%; margin-top: .3rem; padding: .45rem .6rem; border: 1px solid #ced4da; border-radius: .25rem; font: inherit; }
.profile-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.profile-actions button { padding: .4rem .75rem; border: 1px solid #6c757d; border-radius: .25rem; background: #fff; cursor: pointer; }
.profile-actions button[type="submit"] { color: #fff; background: #0d6efd; border-color: #0d6efd; }
@media (max-width: 520px) { .rank-header { display: block; } .rank-header time { display: block; margin-top: .35rem; } }