/* 拼图页样式（由 puzzle.wxss 的 rpx 换算为 rem） */
.page-puzzle {
    padding-bottom: 0.96rem;
}

/* ---------- 计时条 ---------- */
.timer-track {
    height: 0.12rem;
    margin: 0.24rem 0.32rem 0;
    border-radius: 999px;
    background: #CFE5FB;
    overflow: hidden;
}

.timer-fill {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6FB0FF, #2E7BF6);
    transition: width 1s linear;
}

.timer-fill.timer-warn {
    background: linear-gradient(90deg, #FFC0A8, #FF8A7A);
}

/* ---------- 关卡列表 ---------- */
.lv-intro {
    margin: 0.4rem 0.4rem 0.08rem;
}

.lv-intro-main {
    display: block;
    color: #16283C;
    font-size: 0.4rem;
    font-weight: 700;
    letter-spacing: 0.01rem;
}

.lv-intro-sub {
    display: block;
    margin-top: 0.12rem;
    color: #7C8EA3;
    font-size: 0.26rem;
}

.lv-list {
    margin-top: 0.32rem;
    padding: 0 0.32rem;
}

.lv-card {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 0.24rem;
    padding: 0.26rem 0.28rem;
    border: 2px solid transparent;
    border-radius: 0.32rem;
    background: #FFFFFF;
    box-shadow: 0 0.14rem 0.36rem rgba(46, 123, 246, 0.09);
    text-align: left;
    transition: transform 0.12s ease;
}

.lv-card:active {
    transform: scale(0.985);
}

.lv-card.lv-done {
    border-color: #CDEFE0;
}

.lv-card.lv-locked {
    background: #F4F8FD;
    box-shadow: none;
    opacity: 0.72;
}

.lv-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 0.24rem;
    background: #EAF3FF;
    overflow: hidden;
}

.lv-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lv-thumb-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 246, 252, 0.8);
    color: #93A9C2;
    font-size: 0.32rem;
    font-weight: 700;
}

.lv-main {
    flex: 1;
    min-width: 0;
    margin-left: 0.24rem;
}

.lv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lv-name {
    overflow: hidden;
    color: #16283C;
    font-size: 0.32rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lv-chip {
    flex-shrink: 0;
    margin-left: 0.16rem;
    padding: 0.06rem 0.18rem;
    border-radius: 999px;
    font-size: 0.22rem;
    font-weight: 600;
}

.chip-done {
    background: #E6F7EF;
    color: #2F9E74;
}

.chip-open {
    background: #EAF3FF;
    color: #2E7BF6;
}

.chip-lock {
    background: #ECF1F8;
    color: #9AAEC4;
}

.lv-desc {
    display: block;
    margin-top: 0.12rem;
    overflow: hidden;
    color: #8496AA;
    font-size: 0.23rem;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 拼图区 ---------- */
.board {
    position: relative;
    width: 6.84rem;
    margin: 0.36rem auto 0;
    padding: 0.12rem;
    border-radius: 0.36rem;
    background: #FFFFFF;
    box-shadow: 0 0.18rem 0.54rem rgba(46, 123, 246, 0.12);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.board.board-solved {
    animation: board-pop 0.45s ease-out;
}

@keyframes board-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.97);
    }

    100% {
        transform: scale(1);
    }
}

.grid {
    position: relative;
    width: 6.6rem;
    height: 6.6rem;
}

.cell {
    position: absolute;
    width: 2.12rem;
    height: 2.12rem;
    border-radius: 0.16rem;
    transition: transform 0.18s ease, left 0.18s cubic-bezier(0.34, 1.2, 0.64, 1), top 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
    will-change: left, top;
}

/* 裁剪层独立：拖动时外层带 transform，裁剪由内层负责，避免大图溢出 */
.piece-clip {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.16rem;
    background: #EAF3FF;
    overflow: hidden;
}

.piece-img {
    position: absolute;
    width: 6.36rem;
    height: 6.36rem;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
}

.cell.cell-dragging {
    z-index: 9;
    transition: none;
    box-shadow: 0 0.22rem 0.46rem rgba(46, 123, 246, 0.28);
}

.cell.cell-shake {
    animation: cell-shake 0.3s ease;
}

@keyframes cell-shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-0.08rem);
    }

    50% {
        transform: translateX(0.08rem);
    }

    75% {
        transform: translateX(-0.04rem);
    }

    100% {
        transform: translateX(0);
    }
}

.empty-slot {
    position: absolute;
    width: 2.12rem;
    height: 2.12rem;
    border: 1px dashed #C9E2FF;
    border-radius: 0.16rem;
    background: #F3F9FF;
    transition: left 0.18s cubic-bezier(0.34, 1.2, 0.64, 1), top 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ---------- 提示层 ---------- */
.hint-layer {
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: 6.6rem;
    height: 6.6rem;
    display: none;
    border-radius: 0.28rem;
    background: #FFFFFF;
    overflow: hidden;
}

.hint-layer.show {
    display: block;
    animation: fade-in 0.2s ease-out;
}

.hint-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------- 操作提示与按钮 ---------- */
.board-tip {
    margin-top: 0.24rem;
    color: #9BB2CC;
    font-size: 0.22rem;
    letter-spacing: 0.005rem;
    text-align: center;
}

.actions {
    display: flex;
    width: 6.84rem;
    margin: 0.36rem auto 0;
}

.btn {
    display: flex;
    height: 0.96rem;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-radius: 0.28rem;
    font-size: 0.32rem;
    font-weight: 600;
}

.btn-reset {
    margin-right: 0.24rem;
    border: 2px solid #9CC4F8;
    background: #FFFFFF;
    box-shadow: 0 0.08rem 0.2rem rgba(46, 123, 246, 0.08);
    color: #2E7BF6;
}

.btn-hint {
    background: linear-gradient(135deg, #4D97FF, #2E7BF6);
    box-shadow: 0 0.12rem 0.26rem rgba(46, 123, 246, 0.26);
    color: #FFFFFF;
}

.btn-hint.btn-disabled {
    opacity: 0.45;
}

.btn-badge {
    margin-left: 0.08rem;
    font-size: 0.24rem;
    font-weight: 600;
    opacity: 0.85;
}

.back-link {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    color: #7C8EA3;
    font-size: 0.26rem;
    font-weight: 500;
    text-align: center;
}

.back-link:active {
    opacity: 0.7;
}