/* gipf-tutorial.css - 纵向下拉流排版（对齐 Yinsh 风格） */

.tutorial-card {
    max-width: 380px;
    width: 92vw;
    max-height: 85vh;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tutorial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    line-height: 1;
}

/* 纵向滚动内容主体 */
.tutorial-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-right: 6px;
}

/* 极细滚动条 */
.tutorial-body::-webkit-scrollbar {
    width: 4px;
}
.tutorial-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* 单个规则区块：文字在上，动图在下 */
.rule-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rule-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.rule-text {
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

.rule-text strong {
    color: var(--text, #0f172a);
}

/* 动图卡片区域 */
.rule-anim-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 4px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagram-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ====================================================
   GIPF 流畅 SVG 循环动效
   ==================================================== */

/* --- 1. 开局布局与手牌 --- */
.gipf-s0-w1 { animation: gipfDrop 3s 0.2s infinite; }
.gipf-s0-b1 { animation: gipfDrop 3s 0.5s infinite; }
.gipf-s0-w2 { animation: gipfDrop 3s 0.8s infinite; }
.gipf-s0-b2 { animation: gipfDrop 3s 1.1s infinite; }
.gipf-s0-w3 { animation: gipfDrop 3s 1.4s infinite; }
.gipf-s0-b3 { animation: gipfDrop 3s 1.7s infinite; }

@keyframes gipfDrop {
    0% { transform: scale(0); opacity: 0; }
    15%, 82% { transform: scale(1); opacity: 1; }
    92%, 100% { opacity: 0; }
}

/* --- 2. 外部推入与连动顺推 --- */
/* 外侧橙子从推点推入 spot1 (dx=50px) */
.gipf-s1-pusher {
    animation: gipfPushIn 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* 原有 spot1 蓝子被顺推到 spot2 (dx=50px) */
.gipf-s1-p1 {
    animation: gipfShift 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* 原有 spot2 橙子被顺推到 spot3 (dx=50px) */
.gipf-s1-p2 {
    animation: gipfShift 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes gipfPushIn {
    0%, 15% { transform: translateX(0); opacity: 0; }
    22% { opacity: 1; }
    38%, 80% { transform: translateX(50px); opacity: 1; }
    90%, 100% { transform: translateX(50px); opacity: 0; }
}
@keyframes gipfShift {
    0%, 26% { transform: translateX(0); opacity: 1; }
    40%, 80% { transform: translateX(50px); opacity: 1; }
    90%, 100% { transform: translateX(50px); opacity: 0; }
}

/* --- 3. 四连消除与回手 --- */
.gipf-s2-box {
    stroke: var(--piece-white, #f97316);
    animation: gipfBox 3.4s ease infinite;
}
.gipf-s2-dots {
    animation: gipfReturn 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes gipfBox {
    0%, 15% { opacity: 0; stroke-dasharray: 4; }
    25%, 45% { opacity: 1; stroke-dasharray: 0; }
    58%, 100% { opacity: 0; }
}
@keyframes gipfReturn {
    0%, 45% { transform: translateX(0); opacity: 1; }
    60%, 82% { transform: translateX(85px) scale(0.85); opacity: 0; }
    92%, 100% { transform: translateX(0); opacity: 1; }
}

/* --- 4. 俘虏对方棋子 --- */
.gipf-s3-enemy {
    animation: gipfCapture 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.gipf-s3-friendly {
    animation: gipfFade 3.5s ease infinite;
}

@keyframes gipfCapture {
    0%, 45% { transform: translate(0, 0); opacity: 1; }
    65%, 85% { transform: translate(100px, -1px) scale(0.9); opacity: 1; }
    92%, 100% { opacity: 0; }
}
@keyframes gipfFade {
    0%, 45% { opacity: 1; }
    55%, 85% { opacity: 0.2; }
    95%, 100% { opacity: 1; }
}