/* 麻将牌样式 */
.mj-tile {
    width: 35px; height: 50px;
    border: 2px solid #333; border-radius: 4px;
    background: white; display: inline-flex;
    flex-direction: column; align-items: center; justify-content: center;
    font-weight: bold; cursor: pointer; position: relative;
    box-shadow: 0 2px 0 #bbb; color: #000; margin: 2px;
    font-size: 12px;
}

.mj-tile.hun { 
    background: #fef3c7; border-color: #d97706; 
}

.mj-tile.hun::after { 
    content: '混'; position: absolute; top: -2px; right: -2px; 
    background: #d97706; color: white; font-size: 8px; padding: 1px; border-radius: 2px; 
}

.mj-tile.selected { 
    background: #dcfce7; border-color: #22c55e; transform: translateY(-8px); 
}

.mj-tile.new-card { animation: bounce 0.6s ease-in-out; }

.mj-tile.hun-specified::after {
    display: none;
}

.mj-tile.hun-specified {
    position: relative;
}

.mj-tile.hun-specified::before {
    content: '混'; position: absolute; top: -2px; right: -2px; 
    background: #d97706; color: white; font-size: 8px; padding: 1px; border-radius: 2px; 
}

@keyframes bounce {
    0% { transform: translateY(0); }
    30% { transform: translateY(-20px); }
    60% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}

/* 花色颜色 */
.suit-W { color: #e11d48; }
.suit-B { color: #2563eb; }
.suit-T { color: #059669; }
.suit-Z { color: #374151; }

/* 碰/杠/吃组 */
.meld { 
    display: inline-flex; margin-right: 8px; 
    background: rgba(255,255,255,0.1); padding: 2px; border-radius: 4px; 
}

/* 操作按钮 */
.action-btn { 
    padding: 6px 12px; border-radius: 15px; font-weight: bold; margin: 2px; font-size: 12px; 
}

.btn-active { 
    background: #f59e0b !important; animation: pulse 1s infinite; 
}

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* 玩家指示器 */
.player-indicator { 
    width: 20px; height: 20px; border-radius: 50%; 
    background: #6b7280; display: inline-block; margin-right: 5px; 
}

.current-player { background: #fbbf24; }

/* 拖拽排序 */
.drag-over { background: #dbeafe !important; }
.sorting-placeholder { 
    border: 2px dashed #93c5fd; background: rgba(219, 234, 254, 0.5); 
}

/* 弃牌池滚动条样式 */
#discardPool {
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #1f2937;
}

#discardPool::-webkit-scrollbar {
    width: 8px;
}

#discardPool::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 4px;
}

#discardPool::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    border-radius: 4px;
}

#discardPool::-webkit-scrollbar-thumb:hover {
    background-color: #d1d5db;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .mj-tile {
        width: 30px; height: 42px;
        font-size: 10px;
        margin: 1px;
    }
    .meld .mj-tile {
        width: 25px; height: 35px;
        font-size: 9px;
    }
    .action-btn {
        padding: 5px 10px;
        font-size: 11px;
        margin: 1px;
    }
    #discardPool {
        max-height: 100px;
    }
}

/* 混牌选择器样式 */
.hun-selector {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-radius: 12px;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    max-width: 90vw;
}

.hun-selector-title {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.hun-selector .mj-tile {
    margin: 2px;
}

.hun-selector-close {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: #ef4444;
    border-radius: 6px;
    cursor: pointer;
}