/* 中国省份拼图 /tool/china-map-puzzle */

.mp-regions { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-regions button {
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid var(--calc-border, #e2e8f0);
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    color: var(--calc-text, #334155);
    cursor: pointer;
    transition: all .15s;
}
.mp-regions button.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.mp-regions .mp-all { border-color: #f59e0b; }
.mp-regions .mp-all.is-active { background: #f59e0b; border-color: #f59e0b; }

.mp-stats {
    display: flex;
    gap: 16px;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--calc-muted, #64748b);
    margin: 14px 0;
    flex-wrap: wrap;
}
.mp-stats b { color: #2563eb; font-size: 18px; }

.mp-btns { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }

.mp-complete {
    text-align: center;
    padding: 18px;
    background: #f0fdf4;
    border: 2px solid #bbf7d0;
    border-radius: 14px;
    margin-top: 12px;
}
.mp-complete-emoji { font-size: 46px; }
.mp-complete-text { font-size: 19px; font-weight: 800; color: #15803d; margin: 6px 0 12px; }

/* 地图舞台 */
.mp-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1060 / 800;
    background: linear-gradient(160deg, #eff6ff, #dbeafe);
    border-radius: 14px;
    overflow: hidden;
    touch-action: none;
}
.mp-slot {
    position: absolute;
    border-radius: 8px;
}
.mp-slot-live {
    border: 2px dashed rgba(37, 99, 235, .45);
    background: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s;
}
.mp-slot-live span {
    font-size: 11px;
    color: rgba(51, 65, 85, .5);
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}
.mp-slot-live.is-filled { border-color: transparent; background: transparent; }
.mp-slot-live.is-filled span { display: none; }
.mp-slot-live.is-hint {
    border-color: #f59e0b;
    background: #fef3c7;
    animation: mpFlash .7s ease infinite;
}
@keyframes mpFlash { 0%, 100% { background: #fef3c7; } 50% { background: #fde68a; } }

/* 省份卡片 */
.mp-tray-head {
    font-size: 14px;
    font-weight: 800;
    color: var(--calc-muted, #64748b);
    margin: 12px 0 8px;
}
.mp-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 52px;
    padding: 10px;
    background: var(--calc-soft, #f1f5f9);
    border-radius: 12px;
}
.mp-tile {
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    background: var(--c, #2563eb);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: transform .12s;
}
.mp-tile.is-drag {
    cursor: grabbing;
    transform: scale(1.08) rotate(2deg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-tile.is-placed {
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 8px;
    animation: mpSnap .25s ease;
}
@keyframes mpSnap { 0% { transform: scale(1.2); } 100% { transform: scale(1); } }
.mp-tile.is-shake { animation: mpShake .35s ease; }
@keyframes mpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.mp-tile.is-hint { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* 黑夜模式 */
body.dark-mode .mp-regions button { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .mp-regions button.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
body.dark-mode .mp-regions .mp-all.is-active { background: #d97706; border-color: #d97706; }
body.dark-mode .mp-stage { background: linear-gradient(160deg, #172033, #0f172a); }
body.dark-mode .mp-slot-live { background: rgba(30, 41, 59, .7); border-color: rgba(96, 165, 250, .5); }
body.dark-mode .mp-slot-live span { color: rgba(148, 163, 184, .6); }
body.dark-mode .mp-slot-live.is-hint { background: #3a2f0b; border-color: #f59e0b; }
body.dark-mode .mp-tray { background: #1e293b; }
body.dark-mode .mp-complete { background: #052e16; border-color: #14532d; }