.container{
    padding-top: calc(100dvw*109/1920);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.qr-kv{
    display: block;
    width: calc(100dvw*729/1920);
    margin: 0 auto;
}
.qr-main{
    display: block;
    width: calc(100dvw*749/1920);
    margin: calc(100dvw* -70/1920) auto 0;
}
.footer{
    display: block;
    width: calc(100dvw*360/1920);
    margin: calc(100dvw*50/1920) auto;
}


/* mobile */
@media screen and (max-width: 767px) {
    .container{padding-top: 0;}
    .step1{
        box-sizing: border-box;
        min-height: calc(100dvh - (100dvw*136/640));
        padding-top: calc(100dvw*157/640);

        /* display: none; */
    }
    .game-kv{
        display: block;
        width: 100%;
        margin: calc(100dvw* -70/640) auto 0;
    }
    .game-choco{
        display: block;
        width: calc(100dvw*600/640);
        margin: calc(100dvw* -40/640) auto 0;
    }
    .game-start{
        position: relative;
        display: flex;
        background-size: 100%;
        background-repeat: no-repeat;
        color: #f0d2a2;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        width: calc(100dvw*524/640);
        aspect-ratio: 524/100;
        border: none;
        background-color: transparent;
        background-image: url(../img/m/game_btn.png);
        font-family: 'GenSenRounded2TW-M';
        font-size: calc(100dvw*45/640);
        gap: calc(100dvw*15/640);
        margin: calc(100dvw*30/640) auto 0;
        cursor: pointer;
        box-sizing: border-box;
        padding: 0;
    }
    .game-start:hover{filter: brightness(1.1);}

    .game-start::after{
        content: "";
        background-size: 100%;
        aspect-ratio: 1;
        background-image: url(../img/m/game_btn_arrow.png);
        width: calc(100dvw*44/640);
        transition: all ease .3s;
    }
    .game-start:hover::after{transform: translateX(5px);}


    .step2{
        display: none;
        box-sizing: border-box;
        /* min-height: calc(100dvh - (100dvw*136/640)); */
        padding-top: calc(100dvw * 127 / 640);
        /* padding-top: calc(100dvw*157/640); */
        background-image: url(../img/m/kv_bg.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 100%;
    }
    #game-board { 
      display: grid; 
      grid-template-columns: repeat(8, calc(100dvw*70/640)); 
      grid-template-rows: repeat(8, calc(100dvw*70/640)); 
      gap: calc(100dvw*2/640); 
      margin: calc(100dvw*20/640) auto; 
      width: fit-content;
      background-color: #dac7aa;
      padding: calc(100dvw*20/640);
      border-radius: 10px;
      border: solid 2px #eee0cb;
      box-sizing: border-box;
      pointer-events: none;
    }

    .cell { 
      width: calc(100dvw*70/640); 
      height: calc(100dvw*70/640);
      box-sizing: border-box; 
      border:1px solid #dac7aa; 
      border-radius: 4px; 
      background: #fff4e3; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      pointer-events: none;
    }
    .cell img {  
        display: block;
        object-fit: contain;/* 完整顯示圖像且不變形 */
    }
    .blocked { background: #dac7aa; }

    .special-choco1, 
    .special-choco2, 
    .special-choco3, 
    .special-choco4, 
    .special-choco5, 
    .special-choco6, 
    .special-choco7 { background-color: #fff0c8; }
    
    .special-choco1 img, 
    .special-choco2 img, 
    .special-choco3 img, 
    .special-choco4 img, 
    .special-choco5 img, 
    .special-choco6 img, 
    .special-choco7 img { max-width: none; }

    #controls { 
        margin-top: calc(100dvw*30/640);
        height: calc(100dvw*200/640);
    }
    .ctrl-btn { 
        position: absolute;
        width: calc(100dvw*92/640);
        aspect-ratio: 1; 
        border: none; 
        background: transparent; 
    }
    .ctrl-btn:active { filter: brightness(1.1); }

    .game-btn-up{
        left: 50%;
        transform: translateX(-50%);
    }

    .game-btn-left{
        left: 50%;
        transform: translate(-150%, 50%);
    }

    .game-btn-right{
        left: 50%;
        transform: translate(50%, 50%);
    }

    .game-btn-down{
        left: 50%;
        transform: translate(-50%, 100%);
    }

    #info-bar {
        box-sizing: border-box;
        width: 100%;
        padding: 0 calc(100dvw*20/640);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .info-content{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: calc(100dvw*20/640);
    }

    .info-item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-self: start;
        gap: calc(100dvw*10/640);
    }

    .game-timer, .game-score{
        width: calc(100dvw*96/640);
    }

    .info-text{
        font-family: 'GenSenRounded2TW-H';
        font-weight: bold;
        font-size: calc(100dvw*32/640);
        color: #f0d2a2;
        text-shadow: 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824;
    }
    .info-item:first-child .info-text{
        min-width: calc(100dvw*120/640);
        text-align: right;
    }

    .info-text span{
        font-family: 'Quicksand';
        font-size: calc(100dvw*66/640);
        color: white;
        text-shadow: 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824;
    }

    .sound-btn{
        width: calc(100dvw*80/640);
        aspect-ratio: 1;
        background-image: url(../img/m/game_sound.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 0;
        background-color: transparent;
        border: none;
    }
    .sound-btn.sound-off{
        background-position: 50% 100%;
    }


    #countdown {
        position: fixed;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1001;

        font-size: calc(100dvw*120/640); 
        color:white; 
        font-weight:bold; 
    }

    .footer{
        width: calc(100dvw*360/640);
        margin: calc(100dvw*50/640) auto;
    }

    .player-state-1{
        width: calc(100dvw*51/640);
        aspect-ratio: 51/66;
    }

    .player-state-2{
        width: calc(100dvw*76/640);
        aspect-ratio: 76/57;
    }

    .player-state-3{
        width: calc(100dvw*69/640);
        aspect-ratio: 1;
    }

    .choco-normal{
        width: calc(100dvw*49/640);
        aspect-ratio: 49/36;
    }

    .choco-sp-1{
        width: calc(100dvw*108/640);
        aspect-ratio: 108/50;
        transform: translateX(calc(100dvw*(170 - 108)/2/640));
    }

    .choco-sp-2{
        width: calc(100dvw*108/640);
        aspect-ratio: 108/45;
        transform: translateX(calc(100dvw*(170 - 108)/2/640));
    }

    .choco-sp-3{
        width: calc(100dvw*108/640);
        aspect-ratio: 108/49;
        transform: translateX(calc(100dvw*(170 - 108)/2/640));
    }

    .choco-sp-4{
        width: calc(100dvw*85/640);
        aspect-ratio: 85/55;
        transform: translateX(calc(100dvw*(170 - 85)/2/640));
    }

    .choco-sp-5{
        width: calc(100dvw*93/640);
        aspect-ratio: 93/51;
        transform: translateX(calc(100dvw*(170 - 93)/2/640));
    }

    .choco-sp-6{
        width: calc(100dvw*95/640);
        aspect-ratio: 95/54;
        transform: translateX(calc(100dvw*(170 - 95)/2/640));
    }

    .choco-sp-7{
        width: calc(100dvw*82/640);
        aspect-ratio: 82/57;
        transform: translateX(calc(100dvw*(170 - 82)/2/640));
    }


    #get{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        justify-content: center;
        align-items: center;
        z-index: 1001;
    }

    .get-frame{
        box-sizing: border-box;
        width: calc(100dvw*562/640);
        aspect-ratio: 562/664;
        background-image: url(../img/m/game_popup_letter.png);
        background-size: 100%;
        background-repeat: no-repeat;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: calc(100dvw*20/640);

        padding-top: calc(100dvw*20/640);
    }
    .sp .get-frame{
        background-image: url(../img/m/game_popup_letter_2.png);
    }

    .get-deco{
        display: block;
        width: calc(100dvw*631/640);
        position: absolute;
        transform: scale(0) translateY(0);
        pointer-events: none;
        transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) .5s;
        transition-delay: .3s;
    }
    .classic .get-deco{
        transform: scale(1) translateY(-32%);
    }

    .get-top{
        width: calc(100dvw*111/640);
        aspect-ratio: 111/63;
    }
    .get-top>img{display: none;}
    .classic .get-classic, .sp .get-sp{ display: block;}

    .get-pd>img{display: none;}
    .pd1 .get-pd1,
    .pd2 .get-pd2,
    .pd3 .get-pd3,
    .pd4 .get-pd4,
    .pd5 .get-pd5,
    .pd6 .get-pd6,
    .pd7 .get-pd7{display: block;}
    .get-pd1{ width: calc(100dvw*235/640); }
    .get-pd2{ width: calc(100dvw*251/640); }
    .get-pd3{ width: calc(100dvw*233/640); }
    .get-pd4{ width: calc(100dvw*183/640); }
    .get-pd5{ width: calc(100dvw*198/640); }
    .get-pd6{ width: calc(100dvw*203/640); }
    .get-pd7{ width: calc(100dvw*166/640); }

    .get-title{
        font-family: 'GenSenRounded2TW-H';
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100dvw*458/640);
        aspect-ratio: 458/52;
        font-size: calc(100dvw*30/640);
        font-weight: bold;
        color: white;
        text-shadow: 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062, 0 0 2px #bfa062;

        border-radius: 15px;
        background-color: #e4cc9c;
        letter-spacing: 2px;
    }

    .get-text{
        font-family: 'GenSenRounded2TW-M';
        text-align: center;
        font-size: calc(100dvw*24/640);
        line-height: 1.2;
        color: #592823;
    }

    .get-btn{
        font-family: 'GenSenRounded2TW-B';
        font-weight: bold;
        text-align: center;
        font-size: calc(100dvw*28/640);
        line-height: calc(100dvw*65/640);
        width: calc(100dvw*241/640);
        height: calc(100dvw*65/640);
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
        background-color: transparent;
        border: none;
    }
    .classic .get-btn{ background-image: url(../img/m/game_popup_get.png);}
    .sp .get-btn{ background-image: url(../img/m/game_popup_get_2.png);}


    #js-animaiton{
        position: fixed;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 100dvh;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        justify-content: center;
        align-items: center;
        z-index: -1001;
        opacity: 0;

        pointer-events: none;
    }
    #js-animaiton.ani-play{ z-index: 1001; opacity: 1;}

    .ani-main{
        position: absolute;
        display: block;
        width: calc(100dvw*505/640);
        left: 50%;
        transform: translate(-50%,10%) scale(.5);
        transform-origin: 50% 100%;
        top: calc(100dvw*293/640);
        transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) .3s;
    }
    .ani-play .ani-main{ transform: translate(-50%,0%) scale(1); }

    .ani-deco{
        position: absolute;
        display: block;
    }
    .ani-deco-left{
        width: calc(100dvw*150/640);
        left: 0%;
        top: calc(100dvw*520/640);
        transform: scale(0);
        transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) .5s;
        transition-delay: .3s;
        transform-origin: 100% 50%;
    }
    .ani-deco-right{
        position: absolute;
        display: block;
        width: calc(100dvw*183/640);
        right: 0%;
        top: calc(100dvw*520/640);
        transform: scale(0);
        transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) .5s;
        transition-delay: .4s;
        transform-origin: 0% 50%;
    }
    .ani-play .ani-deco-left,
    .ani-play .ani-deco-right{
        transform: scale(1);
    }

    .ani-fw{
        transform: scale(0);
        opacity: 0;
        transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) .3s;
    }

    .ani-fw-1,.ani-fw-9{
        width: calc(100dvw*94/640);
        top: calc(100dvw*172/640);
        left: calc(100dvw*349/640);
        transition-delay: .1s;
    }
    .ani-fw-9{
        top: calc(100dvw*933/640);
        left: calc(100dvw*574/640);
        transition-delay: .9s;
    }

    .ani-fw-2{
        width: calc(100dvw*73/640);
        top: calc(100dvw*215/640);
        left: calc(100dvw*186/640);
        transition-delay: .2s;
    }
    .ani-fw-3{
        width: calc(100dvw*88/640);
        top: calc(100dvw*767/640);
        left: calc(100dvw*353/640);
        transition-delay: .3s;
    }
    .ani-fw-4{
        width: calc(100dvw*128/640);
        top: calc(100dvw*856/640);
        left: calc(100dvw*428/640);
        transition-delay: .4s;
    }
    .ani-fw-5{
        width: calc(100dvw*185/640);
        top: calc(100dvw*260/640);
        left: calc(100dvw*455/640);
        transition-delay: .5s;
    }
    .ani-fw-6{
        width: calc(100dvw*161/640);
        top: calc(100dvw*260/640);
        left: calc(100dvw*0/640);
        transition-delay: .6s;
    }
    .ani-fw-7{
        width: calc(100dvw*198/640);
        top: calc(100dvw*808/640);
        left: calc(100dvw*143/640);
        transition-delay: .7s;
    }
    .ani-fw-8{
        width: calc(100dvw*109/640);
        top: calc(100dvw*920/640);
        left: calc(100dvw*24/640);
        transition-delay: .8s;
    }

    .ani-play .ani-fw-1,
    .ani-play .ani-fw-2,
    .ani-play .ani-fw-3,
    .ani-play .ani-fw-4,
    .ani-play .ani-fw-5,
    .ani-play .ani-fw-6,
    .ani-play .ani-fw-7,
    .ani-play .ani-fw-8,
    .ani-play .ani-fw-9{
        opacity: 1;
        transform: scale(1);
    }

    .step3{
        box-sizing: border-box;
        min-height: calc(100dvh - (100dvw*136/640));
        padding-top: calc(100dvw*157/640);

        background-image: url(../img/m/result/bg.png);
        background-size: cover;
        background-repeat: no-repeat;

        display: none;
        /* display: flex; */
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: calc(100dvw*20/640);
    }

    .anniversary-100{
        width: calc(100dvw*445/640);
    }

    .anniversary{
        font-family: 'GenSenRounded2TW-B';
        font-size: calc(100dvw*30/640);
        padding: calc(100dvw*16/640);
        color: white;
        text-align: center;
        background-color: #e4cc9c;
        border: #542824 solid calc(100dvw*2/640);
        border-radius: calc(100dvw*30/640);

        text-shadow:0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824, 0 0 2px #542824;
    }

    .anniversary span{
        font-family: 'Quicksand';
        font-weight: bold;
        font-size: calc(100dvw*30/640);
        margin: 0 calc(100dvw*4/640);
    }

    .anniver-year{
        color: #ff9696;
    }

    #anniver-d,#anniver-h,#anniver-m{
        color: #fcbf4a;
    }

    #result-title.success{width: calc(100dvw*623/640);}
    #result-title.almost{width: calc(100dvw*625/640);}
    #result-letter{width: calc(100dvw*562/640);}

    #result-title img,
    #result-letter img{display: none;}

    #result-title.success .result-title-success,
    #result-title.almost .result-title-almost,
    #result-letter.success .result-letter-success,
    #result-letter.almost .result-letter-almost{
        display: block;
    }

    .result-link{
        display: flex;
        width: calc(100dvw*524/640);
        aspect-ratio: 524/100;
        background-image: url(../img/btn.png);
        background-size: cover;
        text-decoration: none;
        color: #623431;
        font-family: 'GenSenRounded2TW-M';
        font-size: calc(100dvw*50/640);
        font-weight: bold;
        align-items: center;
        justify-content: center;
        gap: calc(100dvw*15/640);
    }

    .rl-sp{
        background-size: 100%;
        background-repeat: no-repeat;
        color: #f0d2a2;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        border: none;
        background-color: transparent;
        background-image: url(../img/m/game_btn.png);
    }

    .result-link:hover{
        filter: brightness(1.1);
    }

    .result-link::after{
        content: "";
        background-image: url(../img/m/btn_arrow.png);
        background-size: 100%;
        width: calc(100dvw*44/640);
        aspect-ratio: 1;
        transition: all ease .3s;
    }

    .rl-sp::after {
        background-image: url(../img/m/game_btn_arrow.png);
    }

    .step4{
        box-sizing: border-box;
        min-height: calc(100dvh - (100dvw*136/640));
        padding-top: calc(100dvw* 80 /640);
        display: none;
    }

    .result-reminder{
        width: calc(100dvw * 524 / 640);
        box-sizing: border-box;
        padding: 0px;
        text-align: center;
    }

    .result-deco{
        position: absolute;
        pointer-events: none;
        top: calc(100dvw * 260 / 640);
    }

    .player{position: relative;}
    .player img{
        filter: drop-shadow(0 0 6px rgb(255, 187, 0));
        animation: breathingGlow 1s ease-in-out infinite;
    }

    .player::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgb(255, 187, 0) 60%, transparent 100%);
        filter: blur(20px);
        animation: breathingGlowBG 1s ease-in-out infinite;
    }

    @keyframes breathingGlow {
        0%, 100% {
            filter: drop-shadow(0 0 6px rgb(255, 187, 0));
        }
        50% {
            filter: drop-shadow(0 0 10px rgb(255, 187, 0));
        }
    }

    @keyframes breathingGlowBG {
        0%, 100% {
            filter: blur(15px);
        }
        50% {
            filter: blur(40px);
        }
    }

    img.choco-sp-1,
    img.choco-sp-2,
    img.choco-sp-3{
        filter: drop-shadow(0 0 10px rgba(255, 172, 48, 0.8));
        animation: breathingChocoClassic 1s ease-in-out infinite;
    }
    @keyframes breathingChocoClassic {
        0%, 100% {
            filter: drop-shadow(0 0 10px rgba(255, 172, 48, 0.8));
        }
        50% {
            filter: drop-shadow(0 0 10px rgba(255, 172, 48, 1));
        }
    }

    img.choco-sp-4,
    img.choco-sp-5,
    img.choco-sp-6,
    img.choco-sp-7{
        filter: drop-shadow(0 0 10px rgba(248, 129, 129, 0.8));
        animation: breathingChocoSp 1s ease-in-out infinite;
    }
    @keyframes breathingChocoSp {
        0%, 100% {
            filter: drop-shadow(0 0 10px rgba(248, 129, 129, 0.8));
        }
        50% {
            filter: drop-shadow(0 0 10px rgba(248, 129, 129, 1));
        }
    }

    img.scaleglow {
        animation: scalingGlow .1s ease-in-out 1; /* 1次 */
        animation-fill-mode: forwards;/* 結束後保留最後樣式 */
        transform: scale(0);
        transform-origin: 50% 50%;
    }

    @keyframes scalingGlow {
        0%   { transform: scale(0);}
        100% { transform: scale(1);}
    }

    .choco-sp-1.scaleglowSP{transform: scale(0) translateX(calc(100dvw*(170 - 108)/2/640));  animation: scalingGlowSP .1s ease-in-out 1;   animation-fill-mode: forwards;}
    .choco-sp-2.scaleglowSP{transform: scale(0) translateX(calc(100dvw*(170 - 108)/2/640));  animation: scalingGlowSP .1s ease-in-out 1;   animation-fill-mode: forwards;}
    .choco-sp-3.scaleglowSP{transform: scale(0) translateX(calc(100dvw*(170 - 108)/2/640));  animation: scalingGlowSP .1s ease-in-out 1;   animation-fill-mode: forwards;}
    .choco-sp-4.scaleglowSP{transform: scale(0) translateX(calc(100dvw*(170 - 85)/2/640));   animation: scalingGlowSP4 .1s ease-in-out 1;  animation-fill-mode: forwards;}
    .choco-sp-5.scaleglowSP{transform: scale(0) translateX(calc(100dvw*(170 - 93)/2/640));   animation: scalingGlowSP5 .1s ease-in-out 1;  animation-fill-mode: forwards;}
    .choco-sp-6.scaleglowSP{transform: scale(0) translateX(calc(100dvw*(170 - 95)/2/640));   animation: scalingGlowSP6 .1s ease-in-out 1;  animation-fill-mode: forwards;}
    .choco-sp-7.scaleglowSP{transform: scale(0) translateX(calc(100dvw*(170 - 82)/2/640));   animation: scalingGlowSP7 .1s ease-in-out 1;  animation-fill-mode: forwards;}

    @keyframes scalingGlowSP {
        0%   { transform: scale(0) translateX(calc(100dvw*(170 - 108)/2/640));}
        100% { transform: scale(1) translateX(calc(100dvw*(170 - 108)/2/640));}
    }

    @keyframes scalingGlowSP4 {
        0%   { transform: scale(0) translateX(calc(100dvw*(170 - 85)/2/640));}
        100% { transform: scale(1) translateX(calc(100dvw*(170 - 85)/2/640));}
    }

    @keyframes scalingGlowSP5 {
        0%   { transform: scale(0) translateX(calc(100dvw*(170 - 93)/2/640));}
        100% { transform: scale(1) translateX(calc(100dvw*(170 - 93)/2/640));}
    }

    @keyframes scalingGlowSP6 {
        0%   { transform: scale(0) translateX(calc(100dvw*(170 - 95)/2/640));}
        100% { transform: scale(1) translateX(calc(100dvw*(170 - 95)/2/640));}
    }
    @keyframes scalingGlowSP7 {
        0%   { transform: scale(0) translateX(calc(100dvw*(170 - 82)/2/640));}
        100% { transform: scale(1) translateX(calc(100dvw*(170 - 82)/2/640));}
    }


    #game-board.add5{
        animation: add5-shining .5s ease-in-out 1; /* 1次 */
        animation-fill-mode: forwards;/* 結束後保留最後樣式 */
        box-shadow: rgba(248, 129, 129, 0.9) 0 0 10px 10px;
    }
    @keyframes add5-shining {
        0%      { box-shadow: rgba(248, 129, 129, 0) 0 0 5px 5px;}
        50%     { box-shadow: rgba(248, 129, 129, 0.9) 0 0 5px 5px;}
        100%    { box-shadow: rgba(248, 129, 129, 0) 0 0 10px 10px;}
    }

    #game-board.add10{
        animation: add10-shining .5s ease-in-out 1; /* 1次 */
        animation-fill-mode: forwards;/* 結束後保留最後樣式 */
        box-shadow: rgba(255, 172, 48, 0.9) 0 0 10px 10px;
        
    }
    @keyframes add10-shining {
        0%      { box-shadow: rgba(255, 172, 48, 0) 0 0 5px 5px;}
        50%     { box-shadow: rgba(255, 172, 48, 0.9) 0 0 5px 5px;}
        100%    { box-shadow: rgba(255, 172, 48, 0) 0 0 10px 10px;}
    }
}