/* --- START OF FILE guide.css --- */

/* --- 引导与交互提示样式 --- */

/* 核心引导区 (PC默认样式) */
#guide-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none; /* 关键：允许点击穿透，不阻挡选牌 */
    transition: opacity 0.5s;
    z-index: 10;
    width: 100%;
    padding: 0 20px;
}

.instruction {
    background: var(--glass);
    padding: 20px 40px;
    border: 1px solid var(--primary);
    border-radius: 4px;
    display: inline-block;
    max-width: 90%;
    pointer-events: auto; /* 只有文字框可以交互(如果需要) */
}

/* 手机端特定适配：引导层上移，不要挡住中间的牌 */
@media (max-width: 768px) {
    #guide-overlay {
        top: 20%; /* 上移 */
        transform: translate(-50%, 0);
    }
    .instruction {
        padding: 10px 20px;
        background: rgba(0, 0, 0, 0.6); /* 减弱背景，增加通透感 */
        border: none;
    }
    .instruction h2 {
        font-size: 1.2rem;
        margin-bottom: 5px;
    }
    .instruction p {
        font-size: 0.9rem;
        margin: 0;
    }
    /* 隐藏手机端不需要的手掌图标 */
    .gesture-icon { display: none; }
}

/* 进度条 (仅PC捏合时显示) */
#progress-container {
    position: absolute; top: 60%; left: 50%; transform: translateX(-50%);
    width: 200px; height: 4px; background: rgba(255,255,255,0.1); display: none;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5); border-radius: 2px;
}
#progress-bar { width: 0%; height: 100%; background: var(--primary); transition: width 0.1s linear; box-shadow: 0 0 10px var(--primary); }

/* 右下角手势提示 (移动端隐藏) */
#gesture-hint {
    position: absolute; bottom: 80px; right: 20px;
    text-align: right; font-size: 12px; opacity: 0.6; pointer-events: none;
}
@media (max-width: 600px) {
    #gesture-hint { display: none; }
}

/* --- 新手引导教程 (Tutorial) 样式 --- */
.tutorial-container {
    width: 100%;
    max-width: 500px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tutorial-step {
    display: none; flex-direction: column; align-items: center;
    animation: fadeIn 0.5s;
}
.tutorial-step.active { display: flex; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 演示动画区域 */
.demo-stage {
    width: 100%;
    height: 180px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 20px;
    position: relative;
    display: flex; justify-content: center; align-items: center;
    border: 1px solid rgba(255,255,255,0.05);
}

@media (max-width: 480px), (max-height: 600px) {
    .demo-stage { height: 140px; margin-bottom: 15px; }
    .tutorial-container h3 { font-size: 16px; margin: 5px 0; }
    .tutorial-container p { font-size: 12px; }
}

/* 底部导航点 */
.step-indicators { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.dot { width: 8px; height: 8px; background: #555; border-radius: 50%; transition: 0.3s; }
.dot.active { background: var(--primary); transform: scale(1.2); }

/* 控制区域布局 */
.tutorial-controls {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; margin-top: 10px; padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.dont-show-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #aaa; cursor: pointer; user-select: none; }
.dont-show-label input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; }

.tut-btns { display: flex; gap: 10px; }
.btn-secondary, .btn-primary { padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.btn-secondary { background: transparent; border: 1px solid #555; color: #aaa; }
.btn-primary { background: var(--primary); border: none; color: #000; font-weight: bold; box-shadow: 0 0 10px var(--primary-dim); }

/* --- 纯 CSS 绘制动画 (PC/Mobile 通用或共存) --- */
/* PC端原有动画保持不变 (cam-icon, face-icon, etc...) */
.cam-icon { width: 40px; height: 30px; border: 2px solid #fff; border-radius: 4px; position: absolute; top: 25%; }
.cam-icon::after { content:''; display:block; width:6px; height:6px; background:#fff; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

.face-icon {
    width: 40px; height: 50px; border: 2px solid var(--primary); border-radius: 50%;
    position: absolute; bottom: 25%; animation: move-depth 3s infinite ease-in-out;
}
@keyframes move-depth {
    0%, 100% { transform: scale(0.8); opacity: 0.5; border-color: red; }
    50% { transform: scale(1.2); opacity: 1; border-color: var(--primary); box-shadow: 0 0 15px var(--primary); }
}

.hand-icon {
    width: 60px; height: 80px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M21 9a2.5 2.5 0 0 0-5 0v-2a2.5 2.5 0 0 0-5 0V3a2.5 2.5 0 0 0-5 0v8.6a4.5 4.5 0 1 0 9 0V9a.5.5 0 0 1 1 0v4a2.5 2.5 0 0 0 5 0V9z"/></svg>') no-repeat center/contain;
    position: absolute; opacity: 0.8;
}
.anim-move { animation: move-hand 2s infinite ease-in-out; }
.cursor-target { width: 20px; height: 20px; border: 2px solid var(--primary); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 10px; height: 10px; background: var(--primary); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: move-cursor 2s infinite ease-in-out; }

@keyframes move-hand { 0%, 100% { transform: translateX(-40px) rotate(-10deg); } 50% { transform: translateX(40px) rotate(10deg); } }
@keyframes move-cursor { 0%, 100% { transform: translate(calc(-50% - 40px), -50%); } 50% { transform: translate(calc(-50% + 40px), -50%); } }

.pinch-hand { width: 60px; height: 80px; position: relative; }
.finger-thumb { width: 10px; height: 30px; background: #fff; border-radius: 5px; position: absolute; bottom: 10px; left: 10px; transform-origin: bottom center; transform: rotate(-30deg); animation: pinch-thumb 2s infinite; }
.finger-index { width: 10px; height: 40px; background: #fff; border-radius: 5px; position: absolute; bottom: 10px; right: 10px; transform-origin: bottom center; transform: rotate(30deg); animation: pinch-index 2s infinite; }
.pinch-palm { width: 40px; height: 40px; background: #fff; border-radius: 10px; position: absolute; bottom: 0; left: 10px; }
.pinch-ring { width: 50px; height: 50px; border: 2px dashed var(--primary); border-radius: 50%; position: absolute; top: -10px; left: 5px; animation: pinch-ring 2s infinite; }

@keyframes pinch-thumb { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-5deg); } }
@keyframes pinch-index { 0%, 100% { transform: rotate(30deg); } 50% { transform: rotate(5deg); } }
@keyframes pinch-ring { 0%, 100% { transform: scale(1.5); opacity: 0; border-style: dashed;} 50% { transform: scale(1); opacity: 1; border-style: solid; } }

/* --- Mobile Specific Animations (Updated) --- */

/* 1. 滑动与点击手势 */
.mobile-swipe-hand {
    width: 50px; height: 50px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zM17.84 14.86l-2.61-2.61c-.34-.34-.79-.53-1.27-.53h-.06l-1.9.38v-4.6c0-.55-.45-1-1-1s-1 .45-1 1v6.5h-1.5v-6.5c0-.55-.45-1-1-1s-1 .45-1 1v7c0 2.21 1.79 4 4 4 .92 0 1.77-.31 2.45-.83l4.89-3.82c.48-.37.48-1.09 0-1.47z"/></svg>') no-repeat center/contain;
    position: absolute;
    left: 50%;
    /* 动画：先左滑，后点击 */
    animation: swipe-tap-seq 4s infinite ease-in-out;
    opacity: 0;
}

.tap-ring {
    width: 40px; height: 40px; border: 2px solid var(--primary); border-radius: 50%;
    position: absolute; left: 50%; transform: translate(-50%, -50%);
    animation: tap-ring-seq 4s infinite;
    opacity: 0;
}

@keyframes swipe-tap-seq {
    0% { transform: translate(-40px, -20px) rotate(-10deg); opacity: 0; }
    10% { opacity: 1; }
    40% { transform: translate(40px, -20px) rotate(10deg); opacity: 1; } /* 滑动结束 */
    50% { transform: translate(0, 0) scale(1); opacity: 1; } /* 回到中心准备点击 */
    60% { transform: translate(0, 0) scale(0.9); opacity: 1; } /* 点击下去 */
    70% { transform: translate(0, 0) scale(1); opacity: 1; }
    90% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes tap-ring-seq {
    0%, 50% { opacity: 0; width: 10px; height: 10px; }
    60% { opacity: 1; width: 10px; height: 10px; } /* 点击发生时出现 */
    80% { opacity: 0; width: 60px; height: 60px; } /* 扩散消失 */
    100% { opacity: 0; }
}

/* 2. PC显示器图标 (纯CSS) */
.pc-monitor {
    width: 80px; height: 50px;
    border: 3px solid #ccc;
    border-radius: 6px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}
/* 显示器底座 */
.pc-monitor::after {
    content: ''; position: absolute;
    bottom: -15px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 12px;
    background: #ccc;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.pc-monitor::before {
    content: ''; position: absolute;
    bottom: -18px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 3px; background: #ccc;
}
/* 摄像头点 */
.cam-dot {
    width: 4px; height: 4px; background: #fff; border-radius: 50%;
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    box-shadow: 0 0 5px var(--primary);
    animation: blink-cam 2s infinite;
}
@keyframes blink-cam { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; box-shadow: 0 0 10px var(--primary); } }

/* 屏幕内容模拟 */
.screen-content {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.8));
    overflow: hidden;
    position: relative;
}
.screen-content::after {
    content: 'PC ONLY';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 10px; color: var(--primary); font-weight: bold;
    letter-spacing: 1px;
}