/* ===========================
   全域設定
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

body{
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}


/* ===========================
   畫布 (2388 × 1668)
=========================== */

#app{

    position:absolute;

    left:50%;
    top:50%;

    width:2388px;
    height:1668px;

    overflow:hidden;

    transform-origin:center center;

}


/* ===========================
   首頁
=========================== */

#home,
#roulette{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

}


/* ===========================
   背景
=========================== */

#home-bg,
#roulette-bg{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    display:block;

}


/* ===========================
   開始按鈕
=========================== */

#start-btn{

    position:absolute;

    left:50%;

    /* 這個之後依照 AI 座標調整 */
    top: 1000px;

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

    width:600px;

    cursor:pointer;

    transition:0.2s;
}

#start-btn:hover{

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

}

#start-btn:active{

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

}
/* ===========================
   Roulette
=========================== */

#roulette{

    display:none;

}

#roulette-bg{

    width:100%;
    height:100%;

    display:block;

}
/* ===========================
   卡牌
=========================== */

#card-viewport{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    overflow:hidden;

}

#card-container{

    position:absolute;

    left:50%;
    top:50%;

    display:flex;

    align-items:center;

    gap:40px;

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

    will-change:transform;

}

.card{

    width:650px;

    flex-shrink:0;

    display:block;

    transition:
        transform .35s ease,
        filter .35s ease;

}

.card.selected{

    transform:scale(1.08);

    z-index:10;

}
/* ===========================
   Roulette Video
=========================== */

#roulette-video{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    object-fit:cover;

    display:none;

}


/* ===========================
   Result
=========================== */

#result{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    display:none;

}

#result-bg{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

}

#result-title{

    position:absolute;

    left:50%;

    top:1350px;

    width:1200px;

    transform:translateX(-50%);

}

#draw-card{

    position:absolute;

    left:50%;
    top:53%;

    width:650px;

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

    display:none;

    z-index:10;

}

#result-desc{

    position:absolute;

    left:50%;

    bottom:1250px;

    width:1600px;

    transform:translateX(-50%);

}