body{
    margin:0;
    background:#000;
    overflow:hidden;
    touch-action:none;
    width:100vw;
    height:100dvh;
}

canvas{
    display:block;
    width:100vw;
    height:100dvh;
    background:#020514;
}

#ui{ 
    position:fixed;
    bottom:20px;
    width:100%;
    display:flex;
    justify-content:space-around;
    z-index:10;
}

button{
    width:80px;
    height:80px;
    border:none;
    border-radius:50%;
    font-size:30px;
    background:rgba(255,255,255,.2);
    color:white;
}

#saveBtn{

    display:none;

    position:fixed;

    left:16px;
    bottom:16px;

    z-index:250;

}

#saveMessage{

    display:none;

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    z-index:300;

    max-width:92vw;

    padding:8px 14px;

    color:gold;

    font-size:24px;

    font-weight:bold;

    white-space:nowrap;
    text-align:center;

    cursor:pointer;
    pointer-events:auto;

    text-shadow:
        0 0 10px cyan,
        0 0 20px cyan,
        0 0 40px yellow;

    animation:saveFlash 1s infinite alternate;

}

@media (max-width:768px){

    #saveMessage{

        font-size:20px;

    }

}

#stage4CommentBox{

    display:none;

    position:fixed;

    left:50%;
    bottom:12px;

    transform:translateX(-50%);

    width:min(92vw,520px);

    z-index:120;

    pointer-events:auto;

}

#stage4CommentLog{

    height:28px;

    overflow:hidden;

    margin-bottom:6px;

    color:#fff36a;

    font-size:13px;
    font-family:monospace;

    text-shadow:
        0 0 6px yellow,
        0 0 14px gold,
        0 0 24px #fff36a;

}

.stage4CommentItem{

    display:none;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    animation:commentFloat 2.4s ease-in-out;

}

.stage4CommentItem.active{

    display:block;

}

@keyframes commentFloat{

    0%{

        opacity:0;
        transform:translateY(12px);

    }

    18%{

        opacity:1;
        transform:translateY(0);

    }

    78%{

        opacity:1;
        transform:translateY(0);

    }

    100%{

        opacity:0;
        transform:translateY(-10px);

    }

}

#stage4CommentForm{

    display:flex;
    gap:6px;

}

#stage4CommentInput{

    flex:1;

    min-width:0;
    height:36px;

    border:2px solid rgba(255,245,0,0.9);
    border-radius:6px;

    background:rgba(35,30,0,0.78);

    color:#fff36a;

    font-size:14px;
    padding:0 10px;

    outline:none;

}

#stage4CommentSend{

    width:70px;
    height:36px;

    border-radius:6px;
    border:2px solid #fff36a;

    background:rgba(60,48,0,0.9);

    color:#fff36a;

    font-size:13px;
    font-weight:bold;

}

@keyframes saveFlash{

    from{

        transform:
        translate(-50%,-50%)
        scale(1);

    }

    to{

        transform:
        translate(-50%,-50%)
        scale(1.2);

    }

}

#titleScreen{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:black;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:1000;

    overflow:hidden;
    isolation:isolate;

}

#titleImage{

    position:relative;
    z-index:1;

    width:100vw;
    height:100vh;
    height:100dvh;

    object-fit:contain;

}

#titleScreen::before{
    content:"";
    display:none;
    position:absolute;
    inset:-18px;
    z-index:0;
    background-image:url("title.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    filter:blur(12px) brightness(0.42);
    transform:scale(1.04);
    pointer-events:none;
}

@media (min-aspect-ratio:4/3){

    #titleScreen::before{
        display:block;
    }

}


#startBtn{
    position:absolute;
    top:62%;
    left:50%;
    z-index:1001;
    width:300px;
    height:78px;
    padding:0;
    border:3px solid #a96dff;
    border-radius:6px;
    transform:translate(-50%,-50%);
    overflow:hidden;
    background:rgba(4,8,28,0.92);
    color:white;
    font-family:Impact,"Arial Black",sans-serif;
    font-size:34px;
    font-weight:bold;
    letter-spacing:0;
    cursor:pointer;
    text-shadow:
        0 0 2px white,
        0 0 5px cyan,
        0 0 9px #7c3cff;
    box-shadow:
        inset 0 0 0 2px rgba(94,225,255,0.42),
        inset 0 -10px 22px rgba(255,126,0,0.18),
        0 0 10px cyan,
        0 0 24px #7c3cff;
    animation:titleStartIdle 1.35s ease-in-out infinite alternate;
}

#startBtn::before{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(255,255,255,0.58);
    border-radius:3px;
    pointer-events:none;
}

#startBtn span{
    position:relative;
    z-index:1;
}

#startBtn:active{
    transform:translate(-50%,-50%) scale(0.96);
}

#startBtn.purchased{
    border-color:white;
    box-shadow:
        inset 0 0 0 2px rgba(255,215,0,0.68),
        inset 0 -10px 24px rgba(255,126,0,0.28),
        0 0 16px white,
        0 0 34px cyan,
        0 0 64px #7c3cff;
    animation:startGlow 0.9s ease-in-out infinite alternate;
}

@keyframes titleStartIdle{
    from{
        box-shadow:
            inset 0 0 0 2px rgba(94,225,255,0.34),
            inset 0 -10px 18px rgba(255,126,0,0.14),
            0 0 7px cyan,
            0 0 17px #7c3cff;
    }
    to{
        box-shadow:
            inset 0 0 0 2px rgba(94,225,255,0.55),
            inset 0 -10px 26px rgba(255,126,0,0.24),
            0 0 14px cyan,
            0 0 30px #7c3cff;
    }
}

@keyframes startGlow{
    from{
        box-shadow:
            inset 0 0 0 2px rgba(255,215,0,0.52),
            inset 0 -10px 20px rgba(255,126,0,0.22),
            0 0 10px white,
            0 0 25px cyan,
            0 0 44px #7c3cff;
    }
    to{
        box-shadow:
            inset 0 0 0 2px rgba(255,215,0,0.88),
            inset 0 -10px 30px rgba(255,126,0,0.38),
            0 0 20px white,
            0 0 42px cyan,
            0 0 78px #7c3cff;
    }
}

@media (min-aspect-ratio:4/3){
    #startBtn{
        top:68%;
    }
}

@media (max-width:768px){
    #startBtn{
        width:230px;
        height:64px;
        font-size:29px;
    }
}
#shopBtn{

    position:absolute;

    top:56%;
    left:50%;

    transform:translateX(-50%);

    color:gold;

    font-size:18px;

    font-weight:bold;

    text-shadow:
        0 0 5px gold,
        0 0 10px orange;

    cursor:pointer;

    touch-action:manipulation;
    user-select:none;

    z-index:1001;

}

/* 繧ｹ繝槭・ */
@media (max-width:768px){

    #shopBtn{

        transform:translate(-50%,99px);

        font-size:16px;

    }

}

#accessCounter{

    position:absolute;

    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    z-index:1001;

    color:white;

    font-family:monospace;
    font-size:16px;
    font-weight:bold;

    letter-spacing:0;

    text-shadow:
        0 0 8px cyan,
        0 0 16px blue;

    pointer-events:none;

}

#stageSelectScreen{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:#020514;

    z-index:1500;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    color:white;

}

#stageSelectScreen h2{

    font-size:48px;

    margin-bottom:60px;

    text-shadow:
        0 0 10px cyan,
        0 0 20px cyan;

}

#stageBackBtn{

    position:absolute;

    top:18px;
    left:0;

    width:52px;
    height:52px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;

    border:none;
    border-radius:0;

    background:transparent;

    color:white;

    font-size:42px;
    line-height:1;

    text-shadow:
        0 0 10px cyan,
        0 0 20px blue;

    cursor:pointer;

    touch-action:manipulation;
    user-select:none;

}

.stageBtn{

    position:relative;

    width:280px;
    height:90px;

    border-radius:20px;

    border:3px solid cyan;

    background:#111;

    color:white;

    font-size:34px;
    font-weight:bold;

    margin:20px;

    box-shadow:
        0 0 15px cyan,
        0 0 30px blue;

    cursor:pointer;

    touch-action:manipulation;
    user-select:none;

}

.stageLabel{

    display:block;

}

.stageDifficulty{

    position:absolute;

    right:12px;
    bottom:8px;

    color:gold;

    font-size:18px;
    line-height:1;

    letter-spacing:1px;

    text-shadow:
        0 0 6px gold,
        0 0 12px orange,
        0 0 22px yellow;

    pointer-events:none;

}

@media (max-width:768px){

    #stageSelectScreen h2{

        font-size:32px;

        margin-bottom:40px;

    }

    .stageBtn{

        width:70vw;
        height:80px;

        font-size:28px;

    }
    .stageDifficulty{

        right:10px;
        bottom:7px;

        font-size:15px;

    }
}

#shopScreen{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:#020514;

    z-index:2000;

    color:white;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

#shopScreen h2{

    font-size:50px;

    margin-bottom:80px;

    color:white;

    text-shadow:

        0 0 10px cyan,
        0 0 20px cyan;

}

#shopScreen label{

    display:block;

    width:100%;

    text-align:center;

    font-size:28px;

    color:white;

    text-shadow:

        0 0 10px cyan,
        0 0 20px cyan;

    margin-bottom:50px;

}

#buyBtn{

    width:240px;

    height:90px;

    border:none;

    border-radius:20px;

    background:#2b49ff;

    color:white;

    font-size:35px;

    margin-bottom:30px;

    border:3px solid cyan;

    box-shadow:

        0 0 15px cyan,
        0 0 30px blue;

}

#backBtn{

    width:240px;

    height:90px;

    border:none;

    border-radius:20px;

    background:#222;

    color:white;

    font-size:35px;

    border:3px solid white;

}

/* 繧ｹ繝槭・逕ｨ */
@media (max-width:768px){

    #shopScreen h2{

        font-size:24px;

        margin-bottom:50px;

    }

    #shopScreen label{

        width:90%;

        font-size:16px;

        line-height:1.8;

        margin-bottom:40px;

    }

    #buyBtn{

        width:70vw;

        height:80px;

        font-size:28px;

    }

    #backBtn{

        width:70vw;

        height:80px;

        font-size:28px;

    }

}

@media (max-width:768px){

    #shopScreen{

        justify-content:flex-start;

        padding-top:80px;

    }

}

#shopScreen input[type="radio"]{

    display:none;

}

h1{

    color:gold;

    font-size:70px;

    text-shadow:

        0 0 10px gold,
        0 0 20px orange,
        0 0 40px yellow;

}

#cardCaseBtn{

    position:absolute;

    left:18px;
    bottom:108px;

    width:92px;
    height:92px;

    z-index:1200;

    cursor:pointer;

    touch-action:manipulation;
    user-select:none;

    filter:
        drop-shadow(0 0 8px gold)
        drop-shadow(0 0 18px orange);

}

#cardCaseImage{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

}

#cardCaseCount{

    position:absolute;

    right:-4px;
    bottom:-4px;

    min-width:28px;
    height:28px;

    padding:0 6px;

    border:2px solid gold;
    border-radius:999px;

    background:rgba(0,0,0,0.82);

    color:white;

    font-family:monospace;
    font-size:15px;
    font-weight:bold;
    line-height:28px;
    text-align:center;

    box-shadow:
        0 0 8px gold,
        0 0 16px orange;

}

@media (max-width:768px){

    #cardCaseBtn{

        left:12px;
        bottom:104px;

        width:72px;
        height:72px;

    }

    #cardCaseCount{

        min-width:24px;
        height:24px;

        font-size:13px;
        line-height:24px;

    }

}
#cardCaseScreen{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    z-index:3000;

    background:rgba(2,5,20,0.96);

    color:white;

    overflow-y:auto;

    padding:72px 24px 32px;

    box-sizing:border-box;

}

#cardCaseScreen h2{

    margin:0 0 24px;

    color:gold;

    font-size:38px;
    text-align:center;

    text-shadow:
        0 0 8px gold,
        0 0 18px orange,
        0 0 32px yellow;

}

#cardCaseClose{

    position:fixed;

    top:18px;
    right:18px;

    width:48px;
    height:48px;

    border:2px solid gold;
    border-radius:50%;

    background:rgba(0,0,0,0.7);

    color:white;

    font-size:28px;
    line-height:1;

    box-shadow:
        0 0 8px gold,
        0 0 16px orange;

    z-index:3001;

}

#cardCaseGrid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;

    max-width:720px;

    margin:0 auto;

}

.cardCaseCard{

    position:relative;

    aspect-ratio:2/3;

    border:2px solid gold;
    border-radius:8px;

    overflow:hidden;

    background:#050815;

    box-shadow:
        0 0 8px rgba(255,215,0,0.8),
        0 0 18px rgba(255,140,0,0.45);

}

.cardCaseCard img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.cardCaseEmpty{

    grid-column:1/-1;

    margin-top:40px;

    color:white;

    font-size:18px;
    text-align:center;

    text-shadow:
        0 0 8px cyan,
        0 0 16px blue;

}

@media (max-width:768px){

    #cardCaseScreen{

        padding:68px 12px 28px;

    }

    #cardCaseScreen h2{

        font-size:30px;

    }

    #cardCaseGrid{

        gap:8px;

    }

    #cardCaseClose{

        top:12px;
        right:12px;

        width:44px;
        height:44px;

        font-size:24px;

    }

}
/* Card case refinement */
#cardCaseBtn{

    width:76px;
    height:76px;

}

@media (max-width:768px){

    #cardCaseBtn{

        width:58px;
        height:58px;

    }

    #cardCaseCount{

        right:-6px;
        bottom:-6px;

        min-width:22px;
        height:22px;

        font-size:12px;
        line-height:22px;

    }

}

#cardCaseTabs{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:8px;

    max-width:720px;

    margin:0 auto 18px;

}

.cardCaseTab{

    width:auto;
    height:44px;

    border:2px solid rgba(255,215,0,0.75);
    border-radius:8px;

    background:rgba(0,0,0,0.55);

    color:white;

    font-size:14px;
    font-weight:bold;

    box-shadow:
        0 0 8px rgba(255,215,0,0.55),
        inset 0 0 10px rgba(255,215,0,0.18);

}

.cardCaseTab.active{

    background:rgba(255,215,0,0.18);

    color:gold;

    text-shadow:
        0 0 8px gold,
        0 0 16px orange;

}

.cardCaseCard{

    cursor:pointer;

}

#cardDetailView{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    z-index:3200;

    background:rgba(0,0,0,0.82);

    justify-content:center;
    align-items:center;

    padding:24px;

    box-sizing:border-box;

}

#cardDetailPanel{

    position:relative;

    width:min(86vw,360px);

    padding:18px;

    border:2px solid gold;
    border-radius:10px;

    background:#050815;

    box-shadow:
        0 0 16px gold,
        0 0 36px rgba(255,140,0,0.65);

    text-align:center;

}

#cardDetailClose{

    position:absolute;

    top:-16px;
    right:-16px;

    width:42px;
    height:42px;

    border:2px solid gold;
    border-radius:50%;

    background:rgba(0,0,0,0.85);

    color:white;

    font-size:24px;
    line-height:1;

}

#cardDetailImage{

    width:100%;

    max-height:68vh;

    object-fit:contain;

    display:block;

    border-radius:6px;

}

#cardDetailStage{

    margin-top:6px;

    color:white;

    font-size:14px;

    text-shadow:
        0 0 8px cyan,
        0 0 16px blue;

}

@media (max-width:768px){

    #cardCaseTabs{

        gap:6px;

    }

    .cardCaseTab{

        height:38px;

        font-size:11px;

    }

    }
.cardCaseCard{

    width:100%;
    height:auto;

    padding:0;

    border-radius:8px;

    font-size:inherit;

}
/* Title item shop icon */
#shopBtn{
    position:absolute;
    top:auto;
    right:18px;
    bottom:108px;
    left:auto;
    width:76px;
    height:76px;
    padding:0;
    border:0;
    border-radius:0;
    transform:none;
    background:transparent;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;
    filter:
        drop-shadow(0 0 7px white)
        drop-shadow(0 0 17px #b9c8d8);
    z-index:1200;
}

#itemShopImage{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

@media (max-width:768px){
    #shopBtn{
        right:12px;
        bottom:104px;
        width:58px;
        height:58px;
        transform:none;
    }
}

/* Stage 5 3D */
#stage5Layer{
    display:none;
    position:fixed;
    inset:0;
    z-index:50;
    overflow:hidden;
    background:#07193b url("background5.png") center center / cover no-repeat;
    touch-action:none;
}

#stage5Canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background:transparent;
    touch-action:none;
}

#stage5Hud{
    position:absolute;
    top:max(18px,env(safe-area-inset-top));
    left:max(20px,env(safe-area-inset-left));
    z-index:2;
    color:white;
    font:24px monospace;
    line-height:1.5;
    text-shadow:0 0 8px #001a4d,0 0 14px #4fdcff;
    pointer-events:none;
}

#stage5BossHp{
    color:#ffb000;
}

#stage5Lives{
    position:absolute;
    top:max(22px,env(safe-area-inset-top));
    right:max(20px,env(safe-area-inset-right));
    z-index:2;
    color:#ff263c;
    font:34px monospace;
    text-shadow:0 0 8px #ff263c,0 0 16px rgba(255,255,255,0.8);
    pointer-events:none;
}

#stage5Barrier{
    position:absolute;
    top:82px;
    right:max(20px,env(safe-area-inset-right));
    z-index:2;
    color:#8eeaff;
    font:bold 14px monospace;
    text-shadow:0 0 8px cyan,0 0 16px #246dff;
    pointer-events:none;
}

#stage5Reticle{
    position:absolute;
    top:45%;
    left:50%;
    width:32px;
    height:32px;
    transform:translate(-50%,-50%);
    border:2px solid rgba(126,232,255,0.9);
    border-radius:50%;
    box-shadow:0 0 10px cyan,inset 0 0 8px rgba(126,232,255,0.5);
    pointer-events:none;
}

#stage5Reticle::before,
#stage5Reticle::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    background:#bff6ff;
    box-shadow:0 0 8px cyan;
    transform:translate(-50%,-50%);
}

#stage5Reticle::before{
    width:46px;
    height:2px;
}

#stage5Reticle::after{
    width:2px;
    height:46px;
}

#stage5EndMessage{
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:3;
    color:#ff3047;
    font:bold 58px sans-serif;
    white-space:nowrap;
    text-shadow:0 0 12px red,0 0 28px rgba(255,255,255,0.9);
    pointer-events:none;
}

#stage5Layer.stage5-damaged::after,
#stage5Layer.stage5-barrier-damaged::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
}

#stage5Layer.stage5-damaged::after{
    box-shadow:inset 0 0 90px 34px rgba(255,0,0,0.75);
}

#stage5Layer.stage5-barrier-damaged::after{
    background:rgba(102,204,255,0.08);
    box-shadow:inset 0 0 90px 34px rgba(102,204,255,0.90);
}

#stageSelectScreen{
    overflow-y:auto;
    box-sizing:border-box;
    padding:20px 0;
}

#stageSelectScreen h2{
    margin:0 0 16px;
}

.stageBtn{
    height:72px;
    margin:9px;
}

#cardCaseTabs{
    grid-template-columns:repeat(5,1fr);
}

@media (max-width:768px){
    #stage5Hud{
        top:max(10px,env(safe-area-inset-top));
        left:max(12px,env(safe-area-inset-left));
        font-size:17px;
    }

    #stage5Lives{
        top:max(12px,env(safe-area-inset-top));
        right:max(12px,env(safe-area-inset-right));
        font-size:25px;
    }

    #stage5Barrier{
        top:58px;
        right:max(12px,env(safe-area-inset-right));
        font-size:11px;
    }

    #stage5EndMessage{
        font-size:40px;
    }

    #stageSelectScreen{
        justify-content:flex-start;
        padding-top:58px;
    }

    #stageSelectScreen h2{
        margin-bottom:12px;
        font-size:28px;
    }

    .stageBtn{
        width:70vw;
        height:62px;
        margin:7px;
        font-size:24px;
    }

    #cardCaseTabs{
        grid-template-columns:repeat(5,1fr);
        gap:4px;
    }

    .cardCaseTab{
        padding:0 2px;
        font-size:9px;
    }
}
/* Stage 5 gesture lock */
html.stage5-active,
body.stage5-active{
    overscroll-behavior:none;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}

#stage5Layer,
#stage5Layer *{
    overscroll-behavior:none;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
}

#stage5Canvas{
    -webkit-user-drag:none;
}
/* Clear reward actions */
#clearRewardPanel{
    display:none;
    position:fixed;
    inset:0;
    z-index:190;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:14px;
    padding:18px;
    box-sizing:border-box;
    pointer-events:auto;
}

#cardImage{
    position:static !important;
    top:auto !important;
    left:auto !important;
    width:auto;
    height:auto;
    max-width:min(82vw,420px) !important;
    max-height:calc(100vh - 190px) !important;
    transform:none !important;
    object-fit:contain;
    filter:drop-shadow(0 0 10px cyan) drop-shadow(0 0 24px rgba(255,215,0,0.7));
    pointer-events:auto;
}

#clearActions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    width:min(88vw,420px);
    pointer-events:auto;
}

.clearActionBtn{
    width:calc(50% - 6px);
    height:54px;
    padding:0 12px;
    border-radius:8px;
    background:rgba(3,8,24,0.9);
    color:white;
    font:bold 17px monospace;
    letter-spacing:0;
    cursor:pointer;
    touch-action:manipulation;
}

#clearRestartBtn{
    border:2px solid cyan;
    box-shadow:0 0 10px cyan,0 0 22px rgba(0,110,255,0.85),inset 0 0 12px rgba(0,220,255,0.2);
    text-shadow:0 0 8px cyan;
}

#clearTitleBtn{
    border:2px solid gold;
    box-shadow:0 0 10px gold,0 0 22px rgba(255,125,0,0.75),inset 0 0 12px rgba(255,215,0,0.18);
    text-shadow:0 0 8px gold;
}

.clearActionBtn:active{
    transform:scale(0.96);
}

@media (max-width:768px){
    #clearRewardPanel{
        gap:10px;
        padding:12px;
    }

    #cardImage{
        max-width:86vw !important;
        max-height:calc(100vh - 160px) !important;
    }

    #clearActions{
        width:88vw;
        gap:8px;
    }

    .clearActionBtn{
        width:calc(50% - 4px);
        height:48px;
        font-size:14px;
    }
}
/* Player damage feedback */
#damageFlashOverlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:180;
    pointer-events:none;
}

#damageFlashOverlay.damage-flash-red{
    display:block;
    animation:damageFlashRed 320ms ease-out forwards;
}

#damageFlashOverlay.damage-flash-barrier{
    display:block;
    animation:damageFlashBarrier 320ms ease-out forwards;
}

@keyframes damageFlashRed{
    0%,50%{
        background:rgba(255,0,0,0.10);
        box-shadow:inset 0 0 90px 34px rgba(255,0,0,0.82);
    }
    25%,75%{
        background:rgba(255,0,0,0.03);
        box-shadow:inset 0 0 45px 14px rgba(255,0,0,0.28);
    }
    100%{
        background:transparent;
        box-shadow:inset 0 0 0 0 transparent;
    }
}

@keyframes damageFlashBarrier{
    0%,50%{
        background:rgba(102,204,255,0.10);
        box-shadow:inset 0 0 90px 34px rgba(102,204,255,0.90);
    }
    25%,75%{
        background:rgba(102,204,255,0.03);
        box-shadow:inset 0 0 45px 14px rgba(102,204,255,0.30);
    }
    100%{
        background:transparent;
        box-shadow:inset 0 0 0 0 transparent;
    }
}
/* Owned card quantity badge */
.cardCaseCardCount{
    position:absolute;
    right:5px;
    bottom:5px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-width:30px;
    height:30px;
    padding:0 4px;
    box-sizing:border-box;
    border:2px solid #ffd84d;
    border-radius:50%;
    background:rgba(2,5,20,0.92);
    color:#fff4a8;
    font-size:21px;
    font-weight:bold;
    line-height:1;
    text-shadow:0 0 6px gold,0 0 12px orange;
    box-shadow:0 0 7px gold,0 0 14px rgba(255,140,0,0.75);
    pointer-events:none;
}

@media (max-width:768px){
    .cardCaseCardCount{
        right:3px;
        bottom:3px;
        min-width:25px;
        height:25px;
        font-size:17px;
    }
}
/* Adjacent Image Card Battle title */
#titleImage,
#title2Image{
    user-select:none;
    -webkit-user-drag:none;
}

#titleScreen,
#title2Screen{
    touch-action:none;
    overscroll-behavior:none;
}

#titleSwipeHint{
    position:absolute;
    left:50%;
    top:max(72px,calc(env(safe-area-inset-top) + 58px));
    bottom:auto;
    z-index:1201;
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    height:38px;
    padding:0 8px;
    border:0;
    border-radius:0;
    transform:translateX(-50%);
    background:transparent;
    color:white;
    font-family:monospace;
    font-size:15px;
    font-weight:bold;
    letter-spacing:0;
    white-space:nowrap;
    cursor:pointer;
    text-shadow:0 0 7px white,0 0 14px cyan,0 0 24px #2b49ff;
}

.titleSwipeArrow{
    display:inline-block;
    color:#8feaff;
    font-size:28px;
    line-height:1;
    animation:titleSwipeArrowMove 1s ease-in-out infinite;
}

@keyframes titleSwipeArrowMove{
    0%,100%{ transform:translateX(0); opacity:0.65; }
    50%{ transform:translateX(10px); opacity:1; }
}

#title2Screen{
    visibility:hidden;
    position:fixed;
    inset:0;
    z-index:1300;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:#050207;
    transform:translateX(-100%);
    transition:transform 420ms cubic-bezier(0.22,0.75,0.22,1),visibility 0s 420ms;
    pointer-events:none;
}

#title2Screen.active{
    visibility:visible;
    transform:translateX(0);
    transition:transform 420ms cubic-bezier(0.22,0.75,0.22,1),visibility 0s;
    pointer-events:auto;
}

#title2Image{
    position:relative;
    z-index:1;
    width:100vw;
    height:100vh;
    height:100dvh;
    object-fit:contain;
}

#title2Screen::before{
    content:"";
    display:none;
    position:absolute;
    inset:-18px;
    z-index:0;
    background-image:url("title2.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    filter:blur(12px) brightness(0.34);
    transform:scale(1.04);
    pointer-events:none;
}

#title2StartBtn{
    position:absolute;
    top:76%;
    left:50%;
    z-index:1302;
    width:290px;
    height:76px;
    padding:0;
    border:3px solid #ffd65a;
    border-radius:6px;
    transform:translate(-50%,-50%);
    background:rgba(24,5,34,0.88);
    color:#fff2b3;
    font-family:serif;
    font-size:32px;
    font-weight:bold;
    letter-spacing:0;
    cursor:pointer;
    text-shadow:0 0 7px white,0 0 14px gold;
    box-shadow:inset 0 0 18px rgba(176,55,255,0.75),0 0 10px gold,0 0 24px #8d41ff;
    animation:title2StartGlow 1.1s ease-in-out infinite alternate;
}

#title2StartBtn:active{
    transform:translate(-50%,-50%) scale(0.96);
}

@keyframes title2StartGlow{
    from{ box-shadow:inset 0 0 12px rgba(176,55,255,0.55),0 0 7px gold,0 0 16px #8d41ff; }
    to{ box-shadow:inset 0 0 24px rgba(176,55,255,0.9),0 0 16px gold,0 0 34px #8d41ff; }
}

#title2CardCaseBtn{
    position:absolute;
    left:18px;
    bottom:max(72px,calc(env(safe-area-inset-bottom) + 50px));
    z-index:1400;
    width:76px;
    height:76px;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;
    filter:drop-shadow(0 0 8px gold) drop-shadow(0 0 18px orange);
}

#title2CardCaseImage{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

#title2CardCaseCount{
    position:absolute;
    right:-6px;
    bottom:-6px;
    min-width:24px;
    height:24px;
    padding:0 5px;
    border:2px solid gold;
    border-radius:999px;
    box-sizing:border-box;
    background:rgba(0,0,0,0.86);
    color:white;
    font-family:monospace;
    font-size:13px;
    font-weight:bold;
    line-height:20px;
    text-align:center;
    box-shadow:0 0 8px gold,0 0 16px orange;
}

#title2BackBtn{
    position:absolute;
    left:50%;
    bottom:max(24px,env(safe-area-inset-bottom));
    z-index:1400;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto;
    height:42px;
    padding:0 10px;
    border:0;
    border-radius:0;
    transform:translateX(-50%);
    background:transparent;
    color:#ffe8a3;
    font-family:monospace;
    font-size:14px;
    font-weight:bold;
    letter-spacing:0;
    white-space:nowrap;
    cursor:pointer;
    touch-action:manipulation;
    text-shadow:0 0 7px gold,0 0 15px #8d41ff;
}

.title2BackArrow{
    display:inline-block;
    font-size:26px;
    animation:title2BackArrowMove 1s ease-in-out infinite;
}

@keyframes title2BackArrowMove{
    0%,100%{ transform:translateX(0); opacity:0.65; }
    50%{ transform:translateX(-10px); opacity:1; }
}

@media (min-aspect-ratio:4/3){
    #title2Screen::before{ display:block; }
}

@media (max-width:768px){
    #titleSwipeHint{
        top:max(58px,calc(env(safe-area-inset-top) + 46px));
        bottom:auto;
        height:34px;
        font-size:13px;
    }
    .titleSwipeArrow{ font-size:24px; }
    #title2StartBtn{ top:78%; width:220px; height:62px; font-size:26px; }
    #title2CardCaseBtn{ left:12px; bottom:max(72px,calc(env(safe-area-inset-bottom) + 50px)); width:58px; height:58px; }
    #title2BackBtn{
    position:absolute;
    left:50%;
    bottom:max(24px,env(safe-area-inset-bottom));
    z-index:1400;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto;
    height:42px;
    padding:0 10px;
    border:0;
    border-radius:0;
    transform:translateX(-50%);
    background:transparent;
    color:#ffe8a3;
    font-family:monospace;
    font-size:14px;
    font-weight:bold;
    letter-spacing:0;
    white-space:nowrap;
    cursor:pointer;
    touch-action:manipulation;
    text-shadow:0 0 7px gold,0 0 15px #8d41ff;
}
}

@media (prefers-reduced-motion:reduce){
    #title2Screen{ transition:none; }
    #title2StartBtn,
    .titleSwipeArrow,
    .title2BackArrow{ animation:none; }
}

#soundToggle{
    position:fixed;
    z-index:5000;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid gold;
    border-radius:50%;
    background:rgba(2,5,20,0.9);
    color:gold;
    font:bold 18px Arial;
    box-shadow:0 0 7px gold;
    cursor:pointer;
}
#soundToggle.sound-off{
    color:#aaa;
    border-color:#aaa;
    box-shadow:none;
}

.cardCaseTab{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    line-height:1.05;
}
.cardCaseTab small{
    display:block;
    margin-top:3px;
    color:gold;
    font-size:11px;
    text-shadow:0 0 7px gold;
}