/*
 * 拼图交互补充样式
 * 原有 index.css 中的 levelPage/levelName/concatImgView/splitImgView/handle 等样式保持不变
 * 本文件仅追加拼图网格、碎片、拖拽、弹窗等交互所需样式
 */

/* ---- 左上角关卡指示器 ---- */
.level-indicator {
    position: absolute;
    top: .15rem;
    left: .2rem;
    font-size: .26rem;
    color: #fff;
    background: rgba(101,28,1,.78);
    padding: .08rem .22rem;
    border-radius: .3rem;
    z-index: 100;
    font-weight: bold;
    letter-spacing: .03rem;
    pointer-events: none;
}

/* ---- 网格容器（放在 concatImgView 内）---- */
.grid-board {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 2px;
    position: relative;
    touch-action: none;
}

.grid-cell {
    background: rgba(200,180,140,.15);
    border: 1px dashed rgba(160,132,80,.35);
    position: relative;
    transition: background-color .2s ease;
}

.grid-cell.snap-hint {
    background: rgba(144,238,144,.45);
    box-shadow: inset 0 0 .12rem rgba(34,139,34,.5);
    border-color: #2e8b2e;
}

/* ---- 分割图片区域补充（覆盖原index.css的固定尺寸）---- */
.splitImgView {
    position: relative;
    min-height: 3.7rem;
    padding: .15rem .12rem;
    overflow: hidden;
}

/* ---- 拼图碎片（在 splitImgView 中）---- */
.piece {
    position: absolute;
    cursor: grab;
    transition: transform .3s cubic-bezier(.25,.46,.45,.94);
    will-change: transform, left, top;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid rgba(90,58,34,.4);
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: .03rem;
    box-shadow: 2px 3px 6px rgba(0,0,0,.35);
}

.piece.dragging {
    cursor: grabbing;
    z-index: 9999 !important;
    box-shadow: 6px 10px 20px rgba(0,0,0,.4);
    transition: none;
    transform: scale(1.06);
}

.piece.placed {
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    border-color: transparent;
}

/* ---- 底部按钮图片（复用handle的flex布局，补充点击效果）---- */
.previewBtn,
.backBtn {
    display: block;
    width: 2rem;
    height: auto;
    cursor: pointer;
}
.previewBtn:active,
.backBtn:active { opacity: .75; }

/* ---- 预览弹窗 ---- */
.preview-modal,
.complete-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.65);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.preview-modal.show,
.complete-modal.show { display: flex; }

.preview-content {
    width: 88%;
    max-width: 600px;
    text-align: center;
}
.preview-content img {
    width: 100%;
    border: 3px solid #d4a84b;
    border-radius: .12rem;
}
.close-btn {
    margin-top: .3rem;
    font-size: .28rem;
    padding: .14rem .5rem;
    border-radius: .3rem;
    background: linear-gradient(135deg, #d4a84b, #c49a38);
    border: none;
    color: #5a3a22;
    font-weight: bold;
    cursor: pointer;
}

/* ---- 通关结果展示（在 splitImgView 内）---- */
.splitImgView.result-mode {
    background-color: #fff !important;
    padding: .2rem .12rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.result-title {
    font-size: .32rem;
    color: #651C01;
    font-weight: bold;
    margin-bottom: .15rem;
    text-align: center;
}
.result-img {
    width: auto;
    max-width: 95%;
    max-height: 4.5rem;
    border-radius: .08rem;
    border: 2px solid #d4a84b;
    object-fit: contain;
}

/* ---- 下一关按钮 ---- */
.nextBtn {
    display: none;
    width: 2rem;
    height: auto;
    cursor: pointer;
    font-size: .3rem;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(135deg, #4caf50, #43a047);
    border: 2px solid #388e3c;
    border-radius: .4rem;
    text-align: center;
    line-height: .7rem;
    letter-spacing: .04rem;
}
.nextBtn:active { opacity: .75; }

/* ---- 已废弃的弹窗（保留DOM但不再使用）---- */
.complete-modal { display: none !important; }

/* ---- 通关奖励弹窗（每两关弹出） ---- */
.levelup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    display: none;
    justify-content: center;
    align-items: center;
}
.levelup-modal.show { display: flex; }

.levelup-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.levelup-content {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: .6rem .4rem; */
    width: 85%;
    max-width: 480px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* 恭喜文案 */
.levelup-title {
    color: #f5e6c8;
    text-align: center;
    text-shadow: 0 2px 8px rgba(80,40,10,.7);
    margin-bottom: .35rem;
    letter-spacing: .06rem;
    position: absolute;
    top: -3.5rem;
    font-size: 0.6rem;
    line-height: 0.9rem;
    font-style: italic;
    padding-left: 0.5rem;
}
.levelup-num {
    /* font-size: .52rem; */
    /* color: #ffd700; */
    /* font-weight: bold; */
}

/* 头像框卡片 */
.avatar-card {
    /* background: linear-gradient(180deg, #fff8e8, #f8ecd4); */
    /* border-radius: .16rem; */
    /* box-shadow: 0 4px 20px rgba(60,30,10,.35); */
    /* padding: .3rem .25rem .22rem; */
    /* width: 88%; */
    /* max-width: 360px; */
}
.card-header {
    font-size: .26rem;
    color: #651C01;
    text-align: center;
    letter-spacing: .08rem;
    margin-bottom: .18rem;
    opacity: .85;
}

.avatar-frame {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto .15rem;
    border: 3px solid #c44a2a;
    border-radius: .16rem;
    overflow: hidden;
    cursor: pointer;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}
.avatar-frame:active { transform: scale(.97); }

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    user-select: auto;
}

/* 长按保存预览弹窗 */
.save-preview-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.85);
    z-index: 30000;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.save-preview-overlay.show { display: flex; }

.save-preview-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 500px;
}

.save-preview-tip {
    color: #ffd700;
    font-size: .32rem;
    margin-bottom: .25rem;
    text-align: center;
    letter-spacing: .04rem;
    animation: tipPulse 1.8s ease-in-out infinite;
}
@keyframes tipPulse {
    0%,100% { opacity: 1; }
    50%     { opacity: .5; }
}

.save-preview-img {
    width: 100%;
    max-width: 400px;
    border: 4px solid #d4a84b;
    border-radius: .12rem;
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    user-select: auto;
    touch-action: auto;
}

.save-preview-close {
    margin-top: .4rem;
    font-size: .3rem;
    color: #fff;
    padding: .18rem .8rem;
    border: 2px solid #d4a84b;
    border-radius: .4rem;
    cursor: pointer;
    letter-spacing: .04rem;
}
.save-preview-close:active { background: rgba(255,255,255,.15); }

/* 徽章叠加在头像上方 */
.avatar-badge {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
    display: none;
}
.avatar-frame.has-avatar .avatar-badge { display: block; }

.avatar-placeholder {
    font-size: .24rem;
    color: #999;
    text-align: center;
    line-height: 1.4;
    user-select: none;
}

/* 有头像时隐藏占位 */
.avatar-frame.has-avatar .avatar-img { display: block; }
.avatar-frame.has-avatar .avatar-placeholder { display: none; }

.avatar-input {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 4;
}

.card-footer {
    font-size: .23rem;
    color: #8B4513;
    text-align: center;
    letter-spacing: .06rem;
    opacity: .75;
}

/* 操作按钮区 */
.levelup-actions {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: 7.3rem;
    z-index: 1000;
}
.action-btn {
    height: .72rem;
    cursor: pointer;
    transition: transform .15s ease;
}
.action-btn:active { transform: scale(.93); }
.btn-save-avatar { width: 2.2rem; }
.btn-continue   { width: 2.2rem; }
.btn-continue.hidden { display: none; }
.footerText.hidden { display: none; }

/* 底部提示 */
.levelup-hint {
    margin-top: .28rem;
    font-size: .24rem;
    color: #f5e6c8;
    text-align: center;
    line-height: 1.5;
    text-shadow: 0 1px 6px rgba(60,20,5,.6);
    opacity: .9;
}