/* ===== 基本 ===== */
body{
    margin:0;
    background:transparent;
    font-family:"Noto Sans TC","Segoe UI","Microsoft JhengHei","PingFang TC",sans-serif;
    color:#1f2937;
    font-size:14px;
    -webkit-text-size-adjust:100%;
}

/* ===== 外層 ===== */
.vote-page{
    width:100%;
    max-width:1000px;
    min-width:620px;
    margin:12px auto;
}

.vote-panel{
    padding:8px 6px;
    background:transparent;
    border:none;
    box-shadow:none;
}

/* ===== 標題 ===== */
.vote-header h1{
    margin:0 0 8px;
    font-size:18px;
    font-weight:700;
    color:inherit;
}

/* ===== 列表：固定 5 個，最窄 120px ===== */
.vote-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(120px, 1fr));
    gap:3px;
}

/* ===== 共用內部結構 ===== */
.vote-avatar-wrap{
    flex:0 0 auto;
    min-width:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .16s ease;
}

.vote-info{
    flex:1;
    min-width:0;
}

.vote-name{
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    word-break:break-all;
    color:#111827;
    transition:color .16s ease;
}

.vote-meta{
    margin-top:1px;
    font-size:11px;
    line-height:1.1;
    color:#6b7280;
    transition:color .16s ease;
}

.vote-trip{
    font-weight:700;
    margin-right:1px;
    transition:color .16s ease;
}

/* ===== 共用卡片圖片 ===== */
.vote-card img,
.vote-card-night img,
.vote-card-night-self img,
.vote-card-dead img,
.vote-card-revive-disabled img,
.vote-card-revive-disabled-night img,
.vote-card-revive-dead img{
    display:block;
    object-fit:cover;
    background:#fff;
    border-radius:6px;
}

/* =========================================
   1. 白天版投票卡片
========================================= */
.vote-card{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:60px;
    padding:0px 2px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.15);
    background:#ffffff;
    cursor:pointer;
    box-sizing:border-box;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease,
        background .12s ease,
        color .12s ease;
    -webkit-tap-highlight-color:transparent;
}

.vote-card:not(.disabled):not(.selected):hover{
    transform:translateY(-1px);
    border-color:#93c5fd;
    box-shadow:0 4px 10px rgba(59,130,246,0.15);
}

.vote-card.selected{
    border-color:#1e40af;
    background:#2563eb;
    box-shadow:
        0 0 0 2px rgba(37,99,235,0.4),
        0 6px 14px rgba(37,99,235,0.3);
}

.vote-card.selected:hover{
    background:#2563eb;
    border-color:#1e40af;
}

.vote-card.selected .vote-name{
    color:#ffffff;
}

.vote-card.selected .vote-meta{
    color:#dbeafe;
    font-weight:700;
}

.vote-card.selected .vote-trip{
    color:#ffffff !important;
}

.vote-card:not(.disabled):active{
    transform:scale(0.98);
}

/* =========================================
   2. 夜晚版投票卡片
========================================= */
.vote-card-night{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:60px;
    padding:0px 2px;
    border-radius:10px;
    box-sizing:border-box;
    overflow:hidden;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease,
        background .12s ease,
        color .12s ease;
    border:1px solid rgba(130,150,255,0.28);
    background:linear-gradient(180deg, #000050 0%, #0a0a6e 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 2px 8px rgba(0,0,0,0.22);
}

.vote-card-night .vote-name{
    color:#f3f6ff;
}

.vote-card-night .vote-meta{
    color:#c7d2fe;
}

.vote-card-night:not(.selected):hover{
    transform:translateY(-1px);
    border-color:#7aa2ff;
    box-shadow:
        0 0 0 1px rgba(122,162,255,0.28),
        0 6px 14px rgba(37,99,235,0.22),
        0 0 14px rgba(96,165,250,0.16),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

/* 夜晚選取：金色本體 + 金色發光，粗細接近白天 */
.vote-card-night.selected{
    border-color:#facc15;
    background:linear-gradient(180deg, #ffe082 0%, #facc15 55%, #d4a300 100%);
    box-shadow:
        0 0 0 1px rgba(250,204,21,0.6),
        0 0 12px rgba(250,204,21,0.5),
        0 6px 16px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.45);
    transform:translateY(-1px);
}

.vote-card-night.selected:hover{
    border-color:#facc15;
    background:linear-gradient(180deg, #ffe082 0%, #facc15 55%, #d4a300 100%);
}

.vote-card-night.selected .vote-name{
    color:#3b2a00;
}

.vote-card-night.selected .vote-meta{
    color:#5b4300;
    font-weight:700;
}

.vote-card-night.selected .vote-trip{
    color:#7a5200 !important;
}

.vote-card-night:active{
    transform:scale(0.98);
}

/* =========================================
   3. 夜晚版自己：不可選
========================================= */
.vote-card-night-self{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:60px;
    padding:0px 2px;
    border-radius:10px;
    box-sizing:border-box;
    overflow:hidden;
    cursor:default;
    pointer-events:none;
    border:1px solid rgba(120,130,190,0.22);
    background:linear-gradient(180deg, #1b1b45 0%, #2b2b58 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 2px 8px rgba(0,0,0,0.16);
    opacity:0.88;
}

.vote-card-night-self .vote-name{
    color:#dbe3ff;
}

.vote-card-night-self .vote-meta{
    color:#98a4d4;
}

/* =========================================
   4. 死亡玩家卡片：投票畫面用，日夜共用，不可選
========================================= */
.vote-card-dead{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:60px;
    padding:0px 2px;
    border-radius:10px;
    box-sizing:border-box;
    overflow:hidden;
    cursor:default;
    pointer-events:none;
    border:1px solid rgba(120,120,120,0.32);
    background:linear-gradient(180deg, #cfcfcf 0%, #a8a8a8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 2px 6px rgba(0,0,0,0.10);
    opacity:0.82;
    filter:saturate(0.2);
}

.vote-card-dead .vote-name{
    color:#4b5563;
}

.vote-card-dead .vote-meta{
    color:#6b7280;
}

.vote-card-dead .vote-trip{
    color:#6b7280 !important;
}

/* =========================================
   5. 復活畫面：活人（日版，不可選）
========================================= */
.vote-card-revive-disabled{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:60px;
    padding:0px 2px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.15);
    background:#ffffff;
    opacity:0.55;   
    cursor:default;
    pointer-events:none;
    filter:saturate(0.2);
    box-sizing:border-box;
}

.vote-card-revive-disabled .vote-name{
    color:#6b7280;
}

.vote-card-revive-disabled .vote-meta{
    color:#8b8b8b;
}

.vote-card-revive-disabled .vote-trip{
    color:#8b8b8b !important;
}

/* =========================================
   6. 復活畫面：活人（夜版，不可選）
========================================= */
.vote-card-revive-disabled-night{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:60px;
    padding:0px 2px;
    border-radius:10px;
    border:1px solid rgba(120,130,190,0.22);
    background:linear-gradient(180deg, #1b1b45 0%, #2b2b58 100%);
    opacity:0.88;
    cursor:default;
    pointer-events:none;    

}

.vote-card-revive-disabled-night .vote-name{
    color:#9ca3af;
}

.vote-card-revive-disabled-night .vote-meta{
    color:#6b7280;
}

.vote-card-revive-disabled-night .vote-trip{
    color:#6b7280 !important;
}

/* =========================================
   7. 復活畫面：死亡玩家（可選，日夜共用）
   選取後：粉紫色
========================================= */
.vote-card-revive-dead{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:60px;
    padding:0px 2px;
    border-radius:10px;
    border:1px solid rgba(120,120,120,0.34);
    background:linear-gradient(180deg, #d7d7d7 0%, #b8b8b8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        0 2px 6px rgba(0,0,0,0.10);
    cursor:pointer;
    filter:saturate(0.25);
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease,
        background .12s ease,
        color .12s ease;
    -webkit-tap-highlight-color:transparent;
    box-sizing:border-box;
}

.vote-card-revive-dead .vote-name{
    color:#4b5563;
}

.vote-card-revive-dead .vote-meta{
    color:#6b7280;
}

.vote-card-revive-dead .vote-trip{
    color:#6b7280 !important;
}

.vote-card-revive-dead:not(.selected):hover{
    transform:translateY(-1px);
    border-color:#a1a1aa;
    box-shadow:
        0 4px 10px rgba(120,120,120,0.2);
}

/* 粉紫選取 */
.vote-card-revive-dead.selected{
    border-color:#e879f9;
    background:linear-gradient(180deg, #f5d0fe 0%, #e879f9 55%, #c026d3 100%);
    box-shadow:
        0 0 0 1px rgba(232,121,249,0.55),
        0 0 14px rgba(232,121,249,0.45),
        0 6px 14px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.5);
    transform:translateY(-1px);
    filter:none;
}

.vote-card-revive-dead.selected .vote-name{
    color:#4a044e;
}

.vote-card-revive-dead.selected .vote-meta{
    color:#6b056b;
    font-weight:700;
}

.vote-card-revive-dead.selected .vote-trip{
    color:#86198f !important;
}

.vote-card-revive-dead:active{
    transform:scale(0.98);
}

/* ===== 底部區 ===== */
.vote-footer{
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.vote-note{
    font-size:11px;
    color:inherit;
}

.vote-actions{
    display:flex;
    gap:6px;
}

.vote-actions a{
    text-decoration:none;
    color:inherit;
    font-size:13px;
}

.vote-actions input{
    padding:4px 10px;
    border-radius:6px;
    border:none;
    background:#2563eb;
    color:#fff;
    font-size:13px;
    cursor:pointer;
}