index.css

:root {
    --SQRT2: 1.4142136;
    --SQRT3: 1.7320508;
}
body {
    margin: 0;
    --cover-color: transparent;
    color: #fff;
    background-color: #2b2b2b;
    user-select: none;
    overflow: hidden;
}
[id^="page-"] {
    position: absolute;
    width: 100vw; height: 100vh;
    top: 0; left: 0;
    transition: opacity 1s ease;
}
.game-cover {
    --top-height: 10%;
    --bottom-height: 35%;
    --bottom-start: calc(100% - var(--bottom-height));
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.333), transparent var(--top-height)),
        linear-gradient(transparent 0, transparent calc(var(--bottom-start) - 5%),
            transparent calc(var(--bottom-start) - 5%), rgba(0, 0, 0, 0.2) calc(var(--bottom-start) + var(--bottom-height) * 0.85), rgba(0, 0, 0, 0.333)),
        linear-gradient(transparent 0, transparent var(--bottom-start),
            transparent var(--bottom-start), var(--cover-color) calc(var(--bottom-start) + var(--bottom-height) * 0.85));
    height: 100%; width: 100%;
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
}
#full-screen-icon-btn, .full-screen-icon-btn {
    /* width: 64px; height: 64px; */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle r='30' cy='32' cx='32' stroke-width='4' stroke='%23fff' fill='transparent'/%3E%3Crect x='16' y='16' width='32' height='32' fill='transparent' stroke='%23fff' stroke-width='4'%0Astroke-dasharray='12,8 24,8 24,8 24,8'/%3E%3C/svg%3E");
}
body:fullscreen #full-screen-icon-btn,
body:fullscreen .full-screen-icon-btn {
    display: none;
}
#github-icon-btn, .github-icon-btn {
    /* width: 32px; height: 32px; */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'%3E%3C/path%3E%3C/svg%3E");
}
#setting-icon-btn, .setting-icon-btn {
    /* width: 64px; height: 64px; */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 350'%3E%3Cg fill='%23fff' transform='translate(2.6 2.6) scale(3.8 3.8)'%3E%3Cpath transform='translate(-13.5 -13.5) scale(1.3 1.3)' d='M51.994 67.823c-1.886 0-3.722-.978-4.729-2.725c-.271-.471-.782-.767-1.321-.719c-.625 .029-1.26 .029-1.882 0c-.566-.048-1.054 .249-1.326 .718c-1.503 2.603-4.845 3.495-7.445 1.997l-4.57-2.639c-1.261-.729-2.163-1.904-2.54-3.31c-.377-1.406-.183-2.875 .545-4.136c0.271-.471 .245-1.067-.069-1.558c-.158-.247-.31-.497-.457-.751c-.148-.257-.289-.515-.423-.772c-.269-.52-.772-.841-1.315-.841c-3.005 0-5.45-2.445-5.45-5.45v-5.277c0-3.005 2.445-5.45 5.45-5.45c0.544 0 1.037-.302 1.287-.788c0.288-.559 .604-1.107 .941-1.631c0.294-.457 .309-1.032 .038-1.501c-1.503-2.603-.609-5.943 1.994-7.446l4.57-2.638c2.603-1.502 5.943-.608 7.445 1.995c0.272 .47 .771 .738 1.32 .72c0.622-.03 1.255-.03 1.882 0c0.547 .017 1.054-.249 1.325-.718c1.505-2.604 4.846-3.5 7.446-1.997l4.57 2.638c1.261 .728 2.163 1.903 2.539 3.31c0.377 1.406 .184 2.875-.545 4.136c-.271 .471-.244 1.067 .069 1.558c0.158 .245 .312 .497 .46 .754c0.146 .255 .287 .513 .421 .771c0.268 .517 .771 .838 1.314 .838h.001c1.456 0 2.824 .567 3.854 1.596s1.596 2.398 1.596 3.854v5.277c0 3.005-2.445 5.45-5.45 5.45c-.543 0-1.036 .302-1.285 .788c-.286 .555-.603 1.104-.942 1.631c-.294 .456-.309 1.032-.037 1.501c1.503 2.604 .608 5.944-1.994 7.446l-4.57 2.64C53.854 67.588 52.918 67.823 51.994 67.823zM46.019 60.378c1.943 0 3.73 1.024 4.709 2.719c0.194 .337 .508 .577 .882 .678c0.373 .101 .765 .049 1.1-.145l4.57-2.639c0.336-.193 .575-.506 .676-.88s.049-.765-.145-1.101c-1.024-1.773-.972-3.945 .137-5.668c0.271-.42 .521-.855 .748-1.295c0.938-1.824 2.793-2.959 4.842-2.959c0.8 0 1.451-.65 1.451-1.45v-5.277c0-.387-.15-.751-.425-1.025c-.273-.273-.638-.424-1.024-.424l0 0h-.001c-2.045 0-3.91-1.15-4.867-3.001c-.106-.207-.218-.41-.335-.613c-.115-.201-.235-.397-.359-.59c-1.125-1.756-1.189-3.946-.167-5.718c0.194-.336 .246-.727 .146-1.101s-.34-.687-.676-.881l-4.57-2.638c-.337-.194-.729-.246-1.1-.145c-.375 .101-.688 .34-.882 .676c-1.023 1.775-2.936 2.806-4.984 2.715c-.497-.024-.999-.023-1.493 0c-2.052 .097-3.954-.941-4.978-2.714c-.4-.692-1.289-.931-1.982-.532l-4.57 2.638c-.335 .194-.576 .507-.676 .881s-.049 .765 .145 1.101c1.024 1.774 .972 3.946-.138 5.668c-.267 .415-.518 .85-.746 1.294c-.938 1.825-2.794 2.959-4.842 2.959c-.801 0-1.452 .65-1.452 1.45v5.277c0 .8 .65 1.45 1.45 1.45c2.045 0 3.91 1.15 4.867 3.001c0.105 .203 .217 .408 .334 .611c0.116 .2 .237 .399 .363 .596c1.123 1.753 1.186 3.942 .165 5.713c-.194 .337-.246 .728-.146 1.102s.34 .687 .676 .881l4.57 2.638c0.693 .401 1.581 .16 1.981-.531c1.026-1.775 2.947-2.8 4.986-2.715c0.493 .025 .995 .025 1.493 0C45.84 60.38 45.93 60.378 46.019 60.378z' /%3E%3Ccircle cx='45' cy='45' r='9' /%3E%3Cpath d='M45 90C20.187 90 0 69.813 0 45C0 20.187 20.187 0 45 0c24.813 0 45 20.187 45 45C90 69.813 69.813 90 45 90zM45 4C22.393 4 4 22.393 4 45s18.393 41 41 41s41-18.393 41-41S67.607 4 45 4z' /%3E%3C/g%3E%3C/svg%3E");
}
#play-icon-btn, .play-icon-btn, #back-icon-btn, .back-icon-btn {
    /* width: 134px; height: 134px; */
    background-image: url("data:image/svg+xml,%3Csvg width='134' height='134' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='65' cy='67' cx='67' stroke-width='4' stroke='%23fff' fill='transparent'/%3E%3Cpath d='M46,36L100,67L46,98Z' fill='%23fff'/%3E%3C/svg%3E");
}
#back-icon-btn, .back-icon-btn {
    transform: rotate(180deg);
}
#replay-icon-btn, .replay-icon-btn {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 64 64' enable-background='new 0 0 64 64' xml:space='preserve'%3E%3Cpath fill='%23fff' d='M34.8769989,18.0142002l3.0848999-2.6489c0.4190025-0.3604002,0.4668007-0.9913006,0.1074028-1.4102001 c-0.360302-0.4198999-0.9921036-0.4658003-1.4101028-0.1073999L31.5049,18.2735004 c-0.4190006,0.3603001-0.4668007,0.9911995-0.1074009,1.410099l4.4258003,5.1543007 c0.1982002,0.2304993,0.4775009,0.3486004,0.7587013,0.3486004c0.2314987,0,0.4628983-0.0790997,0.6514206-0.2412014 c0.4190025-0.3603001,0.4667778-0.9911995,0.1073799-1.410099l-3.0873795-3.5955009 c7.1364784,0.8006001,12.7035789,6.8648014,12.7035789,14.2117023c0,7.8905983-6.4179001,14.309597-14.307579,14.309597 c-7.8906212,0-14.3095207-6.4189987-14.3095207-14.309597c0-0.5527-0.4473-1-1-1c-0.5528011,0-1,0.4473-1,1 c0,8.9931984,7.3163986,16.309597,16.3095207,16.309597c8.9921799,0,16.307579-7.3163986,16.307579-16.309597 C48.9570007,25.9167004,42.8164215,19.1063004,34.8769989,18.0142002z'/%3E%3Cpath fill='%23fff' d='M32,0c-17.6730995,0-32,14.3268995-32,32s14.3268995,32,32,32s32-14.3269005,32-32S49.6730995,0,32,0z M32,62 c-16.5419998,0-30-13.457901-30-30c0-16.5419998,13.4579992-30,30-30c16.542099,0,30,13.4580002,30,30 C62,48.542099,48.542099,62,32,62z'/%3E%3C/svg%3E%0A");
    /* width: 150px; height: 150px; */
}
#music-icon-btn, .music-icon-btn {
    background-image: url("data:image/svg+xml,%3Csvg width='58' height='58' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m29,0c-15.99,0 -29,13.009 -29,29s13.01,29 29,29s29,-13.009 29,-29s-13.01,-29 -29,-29zm0,56c-14.888,0 -27,-12.112 -27,-27s12.112,-27 27,-27s27,12.112 27,27s-12.112,27 -27,27z'/%3E%3Cpath fill='%23fff' d='m43.994,19.202c0.003,-2.973 0.006,-5.781 -0.044,-8.552c-0.016,-0.811 -0.519,-1.325 -1.313,-1.343c-0.478,-0.015 -0.953,0.02 -1.43,0.054l-0.243,0.017c-2.592,0.17 -5.127,0.353 -7.657,0.723c-4.572,0.668 -8.637,1.727 -12.428,3.24c-0.478,0.191 -0.773,0.577 -0.833,1.084c-0.042,0.354 -0.044,0.708 -0.044,1.087c-0.002,6.781 -0.004,13.562 0.002,20.366c-2.247,-0.426 -4.352,0.055 -6.277,1.433c-1.177,0.842 -1.982,1.909 -2.394,3.169c-0.649,1.978 -0.356,3.749 0.872,5.264c0.604,0.745 1.392,1.126 2.082,1.424c1.102,0.476 2.193,0.713 3.27,0.713c1.618,0 3.203,-0.536 4.738,-1.606c1.705,-1.188 2.632,-2.906 2.681,-4.969c0.023,-0.987 0.024,-1.974 0.025,-2.961l0.002,-0.848c0.005,-1.553 0,-3.106 -0.004,-4.66c-0.009,-2.822 -0.018,-5.74 0.036,-8.614c0,-0.017 0.001,-0.034 0.001,-0.05c0.016,-0.004 0.032,-0.009 0.05,-0.014c2.964,-0.864 5.941,-1.542 8.849,-2.014c1.939,-0.315 3.564,-0.504 5.052,-0.587c-0.006,3.426 -0.007,6.851 0.001,10.276c-0.346,-0.07 -0.715,-0.121 -1.102,-0.132c-2.609,-0.077 -4.718,0.8 -6.329,2.6c-1.217,1.36 -1.729,2.967 -1.479,4.647c0.304,2.059 1.541,3.525 3.676,4.356c2.231,0.869 4.513,0.66 6.783,-0.624l0,0c2.266,-1.283 3.463,-3.326 3.463,-5.907l0,-11.683c-0.01,-2.095 -0.008,-4.039 -0.006,-5.889zm-1.994,17.572c0,1.871 -0.801,3.233 -2.448,4.166c-1.746,0.986 -3.404,1.152 -5.072,0.501c-1.457,-0.567 -2.227,-1.453 -2.424,-2.786c-0.163,-1.104 0.161,-2.092 0.991,-3.021c1.217,-1.36 2.772,-1.995 4.78,-1.935c0.544,0.016 1.088,0.158 1.548,0.294c0.167,0.049 0.676,0.2 1.143,-0.147c0.216,-0.161 0.473,-0.475 0.473,-1.056c-0.012,-3.982 -0.011,-7.964 -0.002,-11.945c0.002,-0.411 -0.123,-0.74 -0.371,-0.981c-0.247,-0.239 -0.585,-0.343 -0.981,-0.339c-1.766,0.059 -3.679,0.264 -6.021,0.644c-2.988,0.485 -6.046,1.181 -9.097,2.071c-1.169,0.34 -1.46,0.722 -1.482,1.954c-0.054,2.886 -0.045,5.815 -0.036,8.647c0.004,1.549 0.009,3.098 0.004,4.647l-0.002,0.852c-0.001,0.972 -0.002,1.944 -0.025,2.917c-0.033,1.42 -0.646,2.556 -1.823,3.376c-1.979,1.378 -3.967,1.607 -6.073,0.697c-0.618,-0.267 -1.032,-0.491 -1.32,-0.848c-0.795,-0.98 -0.962,-2.054 -0.526,-3.382c0.281,-0.86 0.824,-1.568 1.658,-2.165c1.128,-0.807 2.304,-1.208 3.557,-1.208c0.628,0 1.274,0.1 1.944,0.3c0.169,0.051 0.687,0.204 1.149,-0.141c0.464,-0.346 0.464,-0.887 0.464,-1.066c-0.01,-7.1 -0.008,-14.204 -0.006,-21.332c0,-0.148 -0.001,-0.294 0.004,-0.442c3.533,-1.373 7.33,-2.345 11.59,-2.967c2.457,-0.359 4.949,-0.539 7.5,-0.706l0.25,-0.017c0.205,-0.014 0.41,-0.029 0.615,-0.039c0.038,2.549 0.036,5.146 0.033,7.883c-0.002,1.853 -0.004,3.801 0.006,5.896c0,0 0,11.678 0,11.678z'/%3E%3C/svg%3E%0A");
    /* width: 58px; height: 58px; */
}
#muted-music-icon-btn, .muted-music-icon-btn {
    background-image: url("data:image/svg+xml,%3Csvg width='58' height='58' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m29,0c-15.99,0 -29,13.009 -29,29s13.01,29 29,29s29,-13.009 29,-29s-13.01,-29 -29,-29zm0,56c-14.888,0 -27,-12.112 -27,-27s12.112,-27 27,-27s27,12.112 27,27s-12.112,27 -27,27z'/%3E%3Cpath fill='%23fff' d='m43.994,19.202c0.003,-2.973 0.006,-5.781 -0.044,-8.552c-0.016,-0.811 -0.519,-1.325 -1.313,-1.343c-0.478,-0.015 -0.953,0.02 -1.43,0.054l-0.243,0.017c-2.592,0.17 -5.127,0.353 -7.657,0.723c-4.572,0.668 -8.637,1.727 -12.428,3.24c-0.478,0.191 -0.773,0.577 -0.833,1.084c-0.042,0.354 -0.044,0.708 -0.044,1.087c-0.002,6.781 -0.004,13.562 0.002,20.366c-2.247,-0.426 -4.352,0.055 -6.277,1.433c-1.177,0.842 -1.982,1.909 -2.394,3.169c-0.649,1.978 -0.356,3.749 0.872,5.264c0.604,0.745 1.392,1.126 2.082,1.424c1.102,0.476 2.193,0.713 3.27,0.713c1.618,0 3.203,-0.536 4.738,-1.606c1.705,-1.188 2.632,-2.906 2.681,-4.969c0.023,-0.987 0.024,-1.974 0.025,-2.961l0.002,-0.848c0.005,-1.553 0,-3.106 -0.004,-4.66c-0.009,-2.822 -0.018,-5.74 0.036,-8.614c0,-0.017 0.001,-0.034 0.001,-0.05c0.016,-0.004 0.032,-0.009 0.05,-0.014c2.964,-0.864 5.941,-1.542 8.849,-2.014c1.939,-0.315 3.564,-0.504 5.052,-0.587c-0.006,3.426 -0.007,6.851 0.001,10.276c-0.346,-0.07 -0.715,-0.121 -1.102,-0.132c-2.609,-0.077 -4.718,0.8 -6.329,2.6c-1.217,1.36 -1.729,2.967 -1.479,4.647c0.304,2.059 1.541,3.525 3.676,4.356c2.231,0.869 4.513,0.66 6.783,-0.624l0,0c2.266,-1.283 3.463,-3.326 3.463,-5.907l0,-11.683c-0.01,-2.095 -0.008,-4.039 -0.006,-5.889zm-1.994,17.572c0,1.871 -0.801,3.233 -2.448,4.166c-1.746,0.986 -3.404,1.152 -5.072,0.501c-1.457,-0.567 -2.227,-1.453 -2.424,-2.786c-0.163,-1.104 0.161,-2.092 0.991,-3.021c1.217,-1.36 2.772,-1.995 4.78,-1.935c0.544,0.016 1.088,0.158 1.548,0.294c0.167,0.049 0.676,0.2 1.143,-0.147c0.216,-0.161 0.473,-0.475 0.473,-1.056c-0.012,-3.982 -0.011,-7.964 -0.002,-11.945c0.002,-0.411 -0.123,-0.74 -0.371,-0.981c-0.247,-0.239 -0.585,-0.343 -0.981,-0.339c-1.766,0.059 -3.679,0.264 -6.021,0.644c-2.988,0.485 -6.046,1.181 -9.097,2.071c-1.169,0.34 -1.46,0.722 -1.482,1.954c-0.054,2.886 -0.045,5.815 -0.036,8.647c0.004,1.549 0.009,3.098 0.004,4.647l-0.002,0.852c-0.001,0.972 -0.002,1.944 -0.025,2.917c-0.033,1.42 -0.646,2.556 -1.823,3.376c-1.979,1.378 -3.967,1.607 -6.073,0.697c-0.618,-0.267 -1.032,-0.491 -1.32,-0.848c-0.795,-0.98 -0.962,-2.054 -0.526,-3.382c0.281,-0.86 0.824,-1.568 1.658,-2.165c1.128,-0.807 2.304,-1.208 3.557,-1.208c0.628,0 1.274,0.1 1.944,0.3c0.169,0.051 0.687,0.204 1.149,-0.141c0.464,-0.346 0.464,-0.887 0.464,-1.066c-0.01,-7.1 -0.008,-14.204 -0.006,-21.332c0,-0.148 -0.001,-0.294 0.004,-0.442c3.533,-1.373 7.33,-2.345 11.59,-2.967c2.457,-0.359 4.949,-0.539 7.5,-0.706l0.25,-0.017c0.205,-0.014 0.41,-0.029 0.615,-0.039c0.038,2.549 0.036,5.146 0.033,7.883c-0.002,1.853 -0.004,3.801 0.006,5.896c0,0 0,11.678 0,11.678z'/%3E%3Cline stroke-linecap='round' x1='12' y1='12' x2='46' y2='46' stroke-width='2' stroke='%23fff'/%3E%3C/svg%3E%0A");
    /* width: 58px; height: 58px; */
}
#pause-icon-btn, .pause-icon-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fff'%3E%3Cpath d='M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,465.455c-115.493,0-209.455-93.961-209.455-209.455S140.507,46.545,256,46.545S465.455,140.507,465.455,256S371.493,465.455,256,465.455z'/%3E%3Cpath d='M318.061,139.636c-12.853,0-23.273,10.42-23.273,23.273v186.182c0,12.853,10.42,23.273,23.273,23.273c12.853,0,23.273-10.42,23.273-23.273V162.909C341.333,150.056,330.913,139.636,318.061,139.636z'/%3E%3Cpath d='M193.939,139.636c-12.853,0-23.273,10.42-23.273,23.273v186.182c0,12.853,10.42,23.273,23.273,23.273c12.853,0,23.273-10.42,23.273-23.273V162.909C217.212,150.056,206.792,139.636,193.939,139.636z'/%3E%3C/svg%3E");
}
[id$="-icon-btn"], [class*="-icon-btn"] {
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
@media(hover: hover) and (pointer: fine) {
    [id$="-icon-btn"]:hover, [class*="-icon-btn"]:hover, #effect-btn:hover {
        filter: brightness(80%);
    }
}
[id$="-icon-btn"]:active, [class*="-icon-btn"]:active, #effect-btn:active {
    filter: brightness(50%);
}
.trophy-icon {
    width: 512px; height: 512px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m391 241v-30c49.628906 0 90-40.371094 90-90v-60h-75v-30h106v90c0 66.167969-54.832031 120-121 120zm0 0' fill='%23ff9f00' /%3E%3Cpath d='m112.824219 236.09375c-65.84375-17.285156-112.824219-76.949219-112.824219-145.09375v-60h106v30h-75v30c0 54.519531 36.78125 102.261719 89.441406 116.089844zm0 0' fill='%23ffd400' /%3E%3Cpath d='m226 301h60v181h-60zm0 0' fill='%23ffd400' /%3E%3Cpath d='m256 301h30v181h-30zm0 0' fill='%23ff9f00' /%3E%3Cpath d='m91 0v166c0 90.902344 74.097656 165 165 165s165-74.097656 165-165v-166zm0 0' fill='%23ffe470' /%3E%3Cpath d='m421 0v166c0 90.902344-74.097656 165-165 165v-331zm0 0' fill='%23fdbf00' /%3E%3Cpath d='m348.101562 124-63.601562-9.300781-28.5-57.597657-28.5 57.597657-63.601562 9.300781 46.199218 45-11.097656 63.300781 57-30 57 30-11.097656-63.300781zm0 0' fill='%23fff' /%3E%3Cpath d='m301.902344 169 11.097656 63.300781-57-30v-145.199219l28.5 57.597657 63.601562 9.300781zm0 0' fill='%23FDEBD0' /%3E%3Cpath d='m361 482v30h-210v-30c0-16.5 13.5-30 30-30h150c16.5 0 30 13.5 30 30zm0 0' fill='%23ffe470' /%3E%3Cpath d='m361 482v30h-105v-60h75c16.5 0 30 13.5 30 30zm0 0' fill='%23fdbf00' /%3E%3C/svg%3E%0A");
}
.topside-btn-margin {
    width: 6.852vw; max-width: 3.86vh;
    height: 6.852vw; max-height: 3.86vh;
    margin-top: 2.865vh;
    margin-left: 4.9074vw;
    display: inline-block;
}
#top-btns {
    position: absolute;
    z-index: 10000;
    right: 0;
}
#top-btns > * {
    float: right;
    margin-left: auto;
    margin-right: 4.9074vw;
}
#effect-btn {
    box-sizing: border-box;
    border: max(0.25vh, 0.2vw) #fff solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    font-size: larger;
}
.title :first-child {
    margin-top: 0;
}
.title > * {
    text-align: justify;
    text-align-last: justify;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
}
.title > * + * ~ * {
    text-align: center;
    text-align-last: auto;
}


#page-playing {
    /* --cover-color: #1FAEB4; */
    --cover-color: transparent;
    position: relative;
    width: 100vw;
    height: 100vh;
}
#page-playing #nowScoreBox {
    position: absolute;
    top: 0; left: 0;
    text-align: center;
}
#page-playing #nowScore {
    margin: 0;
    display: inline-block;
    width: 100%;
    font-size: var(--font-size);
}
#page-playing #operation-discription {
    pointer-events: none;
    position: absolute;
    bottom: 0; top: 0;
    width: 100%;
    transition: opacity 2s linear 1.5s;
}
#page-playing #operation-discription .left,
#page-playing #operation-discription .right {
    text-align: center;
    width: 50%;
    position: absolute;
    bottom: 0;
    height: 20%;
}
#page-playing #operation-discription .right {
    right: 0;
}
#page-playing .pause-icon-btn {
    width: 6.852vw; max-width: 3.86vh;
    height: 6.852vw; max-height: 3.86vh;
    margin-bottom: 2.865vh;
    margin-left: 4.9074vw;
    position: fixed;
    bottom: 0; left: 0;
}


#page-welcome .menu {
    text-align: center;
    position: absolute;
    top: 60%;
    width: 100%;
}
#page-welcome .btns {
    position: relative;
    width: 100vw;
    height: 21vw; max-height: 11.82vh;
}
#page-welcome .play-icon-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 21vw; max-width: 11.82vh;
}
#page-welcome .levels-mode-btn {
    position: absolute;
    padding: 10px;
    top: 50%;
    left: 25%;
    left: calc(50% - min(11.82vh, 21vw) - 2vw - 10px);
    transform: translate(-50%, -50%) rotate(-15deg);
    border: #fff 1px solid;
    animation: levels-mode-btn-ani 0.4s infinite;
    cursor: pointer;
}
@keyframes levels-mode-btn-ani {
    50% {
        transform: scale(1.02) translate(-50%, -50%) rotate(-15deg);
        border-color: #F9BA6E;
        color: #F9BA6E;
    }
}
@media(hover: hover) and (pointer: fine) {
    #page-welcome .levels-mode-btn:hover {
        filter: brightness(80%) invert(1);
    }
}
#page-welcome .levels-mode-btn:active {
    filter: brightness(50%);
}


#page-challenges {
    background-color: rgba(0, 0, 0, 0.267);
}
#page-challenges .levels {
    margin: auto;
    margin-top: 15px;
    /* background-color: #6e8ef9; */
    width: 80vw;
    width: calc(min(100vw, 60vh - 15px - (2.865vh + min(6.852vw, 3.86vh))) * 0.9);
    height: 80vw;
    height: calc(min(100vw, 60vh - 15px - (2.865vh + min(6.852vw, 3.86vh))) * 0.9);
    display: grid;
    grid-template-columns: repeat(5, 19%);
    grid-template-rows: repeat(5, 19%);
    gap: 1.25%;
}
#page-challenges .levels > * {
    font-size: xx-large;
    border: #fff 2px solid;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media(hover: hover) and (pointer: fine) {
    #page-challenges .levels > *:hover {
        filter: brightness(80%);
    }
}
#page-challenges .levels > *:active {
    filter: brightness(50%);
}
.lock-btn {
    /* background-image: url(lock.svg); */
    width: 100%; height: 100%;
}
#page-challenges .title {
    position: absolute;
    top: 60%;
    width: 100%;
}


#page-gameover {
    background-color: rgba(0, 0, 0, 0.267);
}
#page-gameover .info {
    position: absolute;
    width: 100vw;
    top: 11%;
    line-height: 9vh;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    vertical-align: middle;
}
#page-gameover .info > * {
    padding: 0;
    margin: 0;
}
#page-gameover .player-color-select {
    position: absolute;
    top: 45.5%;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    height: 17vh;
}
#page-gameover .player-color-select::before {
    --height: calc(17vh * 0.128);
    --width_2: calc(var(--height) / var(--SQRT3));
    content: "";
    border-top: var(--height) solid #fff;
    border-right: var(--width_2) solid transparent;
    border-left: var(--width_2) solid transparent;
    position: absolute;
    top: 0;
    left: calc(50% - var(--width_2));
}
#page-gameover .player-color-options::-webkit-scrollbar {
    display: none;
}
#page-gameover .player-color-options {
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: calc(17vh * (0.119 + 0.128));
    height: 44.4776%;
    text-align: center;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
#page-gameover .player-color-options > * {
    --height: calc(17vh * 0.444776);
    height: var(--height);
    width: calc(var(--height) * var(--SQRT3) / 2);
    margin: 0 2vh;

    scroll-snap-align: center;

    position: relative;
    display: inline-block;
}
#page-gameover .player-color-options > *:first-child {
    margin-left: calc(50vw - (17vh * 0.444776 * var(--SQRT3) / 2) / 2);
}
#page-gameover .player-color-options > *:last-child {
    margin-right: calc(50vw - (17vh * 0.444776 * var(--SQRT3) / 2) / 2);
}
#page-gameover .player-color-options > * > * {
    height: var(--height);
    width: calc(var(--height) * var(--SQRT3) / 2);
}
#page-gameover .player-color-options > * > canvas {
    filter: contrast(0) brightness(200%);
}
#page-gameover .player-color-options > * > .lock-icon {
    position: absolute;
    top: 0; left: 0;
    transform: scale(0.7);
}
#page-gameover .player-color-options > .unlock > canvas {
    filter: none;
}
#page-gameover .player-color-options > .unlock > .lock-icon {
    visibility: hidden;
}
#page-gameover .player-color-options > *:not([class*="unlock"]).highlight > canvas {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='colorize' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='matrix' values=' 0 0 0 0 .98 0 0 0 0 .733 0 0 0 0 .431 0 0 0 1 0 '/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E#colorize");
}
@media(hover: hover) and (pointer: fine) {
    #page-gameover .player-color-options > *:not([class*="unlock"]).highlight:hover > canvas {
        filter: contrast(0) brightness(200%);
    }
}
#page-gameover .crystal-info {
    --font-size: calc(17vh * 0.128 * 2);
    height: 30.8224%;
    text-align: center;
    font-size: calc(var(--font-size) * 0.8);
}
#page-gameover .crystal-info > * {
    display: inline-block;
    vertical-align: middle;
}
.crystal-icon {
    --height: calc(var(--font-size) / 2 * 0.6);
    --width_2: calc(var(--height) / var(--SQRT3));
    height: 100%;
    width: calc(var(--width_2) * 2);
    position: relative;
}
.crystal-icon::before,
.crystal-icon::after {
    content: "";
    line-height: 0; height: 0; width: 0;
    border-top-width: 0;
    border-right: var(--width_2) solid transparent;
    border-left: var(--width_2) solid transparent;
    border-bottom: var(--height) solid #fff;
    position: absolute;
    left: 0;
    bottom: 50%;
}
.crystal-icon::after {
    border-bottom-width: 0;
    border-top: var(--height) solid #fff;
    bottom: initial;
    top: 50%;
}
#page-gameover .replay-icon-btn {
    position: absolute;
    width: 100vw;
    height: 21vw; max-height: 11.82vh;

    position: absolute;
    top: 77%;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 21vw; max-width: 11.82vh;
}


#page-setting {
    background-color: rgba(0, 0, 0, 0.267);
}
#page-setting > .btns {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
}
#page-setting > .btns > * {
    margin: auto;
    width: 21vw; max-width: 11.82vh;
    height: 21vw; max-height: 11.82vh;
}
#page-setting > .btns > * + * {
    margin-top: 10vh;
}

#page-pause {
    background-color: rgba(0, 0, 0, 0.4);
}
#page-pause > .info {
    width: 100vw;
    text-align: center;
    margin-top: 15vh;
    font-size: xx-large;
}
#page-pause > .btns {
    position: absolute;
    top: 50%;
    transform: translateY(-40%);
    width: 100vw;
}
#page-pause > .btns > * {
    margin: auto;
    width: 21vw; max-width: 11.82vh;
    height: 21vw; max-height: 11.82vh;
}
#page-pause > .btns > * + * {
    margin-top: 10vh;
}


#page-loading {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 100vh;
    animation: loading-blink 1.3s infinite ease-out;
}
@keyframes loading-blink {
    50% { color: transparent; }
}


#page-challenges-success {
    background-color: rgba(0, 0, 0, 0.27);
}
#page-challenges-success > h1 {
    text-align: center;
    margin-top: 9vh;
}
#page-challenges-success > h1 + h1 {
    margin: revert;
}
#page-challenges-success .trophy-icon {
    width: 25vw; max-width: 17vh;
    height: 25vw; max-height: 17vh;
    position: absolute;
    top: 33vh;
    left: 50%;
    transform: translate(-50%);
    animation: trophy-shake 2s infinite ease-in-out;
}
@keyframes trophy-shake {
    25% { transform: translate(-50%) rotate(10deg); }
    75% { transform: translate(-50%) rotate(-10deg); }
}
#page-challenges-success .back-icon-btn {
    height: 21vw; max-height: 11.82vh;
    width: 21vw; max-width: 11.82vh;
    margin: auto;
}
#page-challenges-success .title {
    position: absolute;
    top: 60%;
    width: 100%;
}