body{
    margin:0;
    padding:0;
    background:#111;
    color:#fff;
    font-family:Arial;
}

.home-container,
.room-container{
    max-width:500px;
    margin:30px auto;
    padding:15px;
}

.card-box{
    background:#1b1b1b;
    border-radius:12px;
    padding:15px;
    margin-bottom:20px;
}

input,
select,
button{
    width:100%;
    margin-top:10px;
    padding:12px;
    border:none;
    border-radius:8px;
    box-sizing:border-box;
}

button{
    background:#5b21b6;
    color:#fff;
    cursor:pointer;
    font-weight:bold;
}

.player-row{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #333;
}

.checkbox-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:15px;
    color:#fff;
}

.checkbox-wrap input{
    width:auto;
    margin:0;
}

.card-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.poker-card{
    width:70px;
    border-radius:8px;
}

.game-container{
    padding:15px;
}

.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.area-box{
    background:#1a1a1a;
    padding:10px;
    border-radius:10px;
    margin-bottom:15px;
}

.slot-row{
    min-height:90px;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.submit-btn{
    margin-top:20px;
}

#timer{
    font-size:22px;
    font-weight:bold;
}

.input-label{
    display:block;
    margin-top:12px;
    margin-bottom:6px;
    font-size:14px;
    color:#bbb;
}

.settle-row{
    padding:12px 0;
    border-bottom:1px solid #333;
}

.settle-small{
    margin-top:6px;
    color:#aaa;
    font-size:13px;
}

.tag-red{
    display:inline-block;
    margin-top:8px;
    padding:4px 8px;
    border-radius:6px;
    background:#7f1d1d;
    color:#fff;
    font-size:13px;
}

.tag-gold{
    display:inline-block;
    margin-top:8px;
    padding:4px 8px;
    border-radius:6px;
    background:#92400e;
    color:#fff;
    font-size:13px;
}

.gif-box{
    text-align:center;
    margin-bottom:15px;
}

.gif-box img{
    max-width:220px;
    width:80%;
}

#shuffle-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.92);
    z-index:99999;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.shuffle-gif{
    width:220px;
    max-width:80%;
}

.shuffle-text{
    margin-top:15px;
    font-size:22px;
    font-weight:bold;
    color:#fff;
}

.selected-card{
    outline:3px solid #facc15;
    transform:translateY(-8px);
}

#pass-status{
    color:#facc15;
    font-weight:bold;
}

.pass-selected-box{
    background:#111;
    border:1px solid #333;
    border-radius:10px;
    padding:10px;
    margin-top:12px;
}

.target-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:12px;
}

.target-buttons button{
    background:#333;
}

.target-buttons button.active-target{
    background:#7c3aed;
}

.selected-card{
    outline:3px solid #facc15;
    transform:translateY(-8px);
}

#pass-status{
    color:#facc15;
    font-weight:bold;
}

.table-result-page{
    max-width:900px;
    margin:0 auto;
    padding:20px;
}

.poker-table{
    position:relative;
    height:480px;
    margin:20px 0;
    border-radius:50%;
    background:radial-gradient(circle, #15803d 0%, #064e3b 70%);
    border:10px solid #3f2f1f;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.table-center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
    font-weight:bold;
}

#battle-title{
    font-size:24px;
    margin-bottom:12px;
}

#battle-detail{
    margin-top:10px;
    font-size:15px;
    color:#e5e7eb;
}

#battle-gif img{
    max-width:180px;
}

.card-back-fan{
    font-size:52px;
    letter-spacing:-12px;
}

.seat{
    position:absolute;
    width:150px;
    min-height:95px;
    background:rgba(0,0,0,.72);
    border-radius:12px;
    padding:10px;
    color:#fff;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.seat-top{
    top:18px;
    left:50%;
    transform:translateX(-50%);
}

.seat-bottom{
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
}

.seat-left{
    left:18px;
    top:50%;
    transform:translateY(-50%);
}

.seat-right{
    right:18px;
    top:50%;
    transform:translateY(-50%);
}

.avatar-circle{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#f59e0b;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 6px;
    font-weight:bold;
}

.seat-name{
    font-weight:bold;
    margin-bottom:5px;
}

.seat-win{
    color:#22c55e;
    font-size:13px;
}

.seat-lose{
    color:#ef4444;
    font-size:13px;
}

@media(max-width:700px){
    .poker-table{
        height:420px;
        border-radius:28px;
    }

    .seat{
        width:120px;
        font-size:13px;
    }

    .seat-left{
        left:8px;
    }

    .seat-right{
        right:8px;
    }

    #battle-title{
        font-size:18px;
    }
}

.action-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:15px 0;
}

.settle-final-btn{
    background:#b45309;
}

.battle-vs-layout{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:12px;
    align-items:center;
    margin-top:10px;
}

.battle-player-card{
    background:rgba(0,0,0,.45);
    border-radius:10px;
    padding:8px;
}

.battle-player-card h3{
    margin:0 0 6px;
    font-size:14px;
}

.vs-text{
    font-weight:bold;
    font-size:20px;
    color:#facc15;
}

.battle-card-group{
    margin-bottom:5px;
}

.battle-card-title{
    font-size:12px;
    color:#ddd;
    margin-bottom:3px;
}

.battle-card-row{
    display:flex;
    justify-content:center;
    gap:2px;
    flex-wrap:wrap;
}

.battle-card{
    width:34px;
    border-radius:4px;
}

.text-win{
    color:#22c55e;
}

.text-lose{
    color:#ef4444;
}

@media(max-width:700px){
    .battle-vs-layout{
        grid-template-columns:1fr;
    }

    .vs-text{
        font-size:16px;
    }

    .battle-card{
        width:28px;
    }
}

/* ===== Game page clear card layout ===== */

.game-container{
    max-width:1280px;
    margin:0 auto;
    padding:14px;
    padding-bottom:120px;
}

.game-container h1{
    display:none;
}

.top-bar{
    position:sticky;
    top:0;
    z-index:20;
    background:#111;
    padding:8px 0;
    gap:10px;
}

#confirmBtn{
    margin-top:0;
    height:46px;
    font-size:16px;
}

#phase-title{
    margin-bottom:14px;
    font-size:16px;
    font-weight:bold;
}

.arrange-section{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.area-box{
    min-height:120px;
    padding:12px;
    border-radius:12px;
    background:#181818;
    border:1px solid #252525;
}

.area-box h3{
    margin:0 0 10px;
    font-size:18px;
}

.slot-row{
    min-height:82px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.card-list{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:30;
    display:flex;
    flex-wrap:nowrap;
    gap:7px;
    overflow-x:auto;
    padding:10px 12px 14px;
    background:rgba(15,15,15,.96);
    border-top:1px solid #333;
    box-shadow:0 -8px 24px rgba(0,0,0,.45);
}

.poker-card{
    width:96px;
    min-width:96px;
    height:auto;
    border-radius:7px;
    background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.45);
    cursor:pointer;
    transition:.12s ease;
}

.poker-card:hover{
    transform:translateY(-8px);
}

.area-box .poker-card,
.slot-row .poker-card{
    width:88px;
    min-width:88px;
}

.target-buttons{
    position:sticky;
    top:60px;
    z-index:18;
    background:#111;
    padding:8px 0;
    margin-bottom:10px;
}

.target-buttons button{
    height:44px;
    margin-top:0;
    font-size:15px;
}

.submit-btn{
    position:fixed;
    left:12px;
    right:12px;
    bottom:96px;
    z-index:31;
    height:46px;
    margin:0;
    font-size:16px;
    background:#5b21b6;
}

.pass-selected-box{
    margin-bottom:12px;
}

#pass-area .card-list{
    bottom:80px;
}

#pass-area .submit-btn{
    bottom:14px;
}

@media(max-width:768px){
    .game-container{
        padding:10px;
        padding-bottom:112px;
    }

    .poker-card{
        width:78px;
        min-width:78px;
    }

    .area-box .poker-card,
    .slot-row .poker-card{
        width:72px;
        min-width:72px;
    }

    .area-box{
        min-height:108px;
    }

    .slot-row{
        min-height:72px;
    }

    .submit-btn{
        bottom:84px;
    }
}