/* ============================================================
   小小导航页 - 卡牌轮播样式表
   ============================================================ */

:root {
    /* ====================================================
       【颜色配置区】 - 在此集中修改所有颜色
       ==================================================== */

    /* ---- 背景色 ---- */
    /* 深蓝遮罩层：覆盖在背景图之上
       透明度建议范围 0.3~0.6：数值越小背景图越清晰，越大越偏深蓝纯色
       配合下方 body::before 的 blur 使用 */
    --bg-deep: rgba(15, 23, 42, 0.45);
    /* 卡牌背景色：半透明深蓝，让背景图隐约可见 */
    --bg-card: rgba(30, 41, 59, 0.6);
    /* 代码块背景色：GitHub Dark 风格的近黑色 */
    --bg-code: #0d1117;

    /* ---- 文字颜色 ---- */
    /* 主文字色：浅灰白，用于标题、正文 */
    --color-text: #e2e8f0;
    /* 次要文字色：中灰，用于注释、路径、提示 */
    --color-muted: #94a3b8;
    /* 高亮色 1（天蓝）：用于激活态、强调、按钮渐变起点 */
    --color-accent: #6a59a1;
    /* 高亮色 2（紫色）：用于按钮渐变终点、特殊运算符 */
    --color-purple: #291d4e;

    /* ---- 边框 ---- */
    /* 通用边框：半透明灰 */
    --color-border: rgba(148, 163, 184, 0.2);
    /* 代码块边框：深灰 */
    --color-code-border: #30363d;

    /* ---- 阴影 ---- */
    /* 卡牌默认阴影：柔和蓝色光晕 */
    --shadow-glow: 0 0 20px rgba(217, 111, 255, 0.15);
    /* 卡牌悬停阴影：更强的蓝色光晕 */
    --shadow-hover: 0 0 30px rgba(231, 93, 255, 0.4);

    /* ---- 动画 ---- */
    /* 缓动函数：Material Design 标准缓动 */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- 字体 ---- */
    --font-mono: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Courier New', monospace;

    /* 注意：--bg-image 变量由 index.html 内联 <style> 注入
       此处【不能】写默认值，否则会因加载顺序覆盖 HTML 中的注入值 */
}

* { box-sizing: border-box; }

/* ============================================================
   页面主体
   ============================================================ */
html, body {
    margin: 0;
    padding: 0;
    /* 双层保险：html + body 都隐藏水平溢出，避免移动端横向滑动 */
    overflow-x: hidden;
    /* 限制触摸行为：只允许垂直滚动，阻止水平拖动页面 */
    touch-action: pan-y;
    overscroll-behavior-x: none;  /* 禁止水平方向的回弹效果 */
}

/* 背景图直接放在 html 元素上（最底层，永远在 body 之下）
   避免用 body 伪元素做背景，负 z-index 在 body 上经常失效 */
html {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    font-family: var(--font-mono);
    color: var(--color-text);
    position: relative;
    /* 深蓝遮罩层 + 毛玻璃质感
       注意：blur 值越大背景图越模糊；如想看清背景图改为 3-4px */
    background: var(--bg-deep);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================================
   页面标题
   ============================================================ */
.page-title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-text);
    text-align: center;
    margin: 0;
    padding: 8px 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-glow);
}
.page-title .cursor {
    color: var(--color-accent);
    animation: blink 1s steps(2) infinite;
}
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ============================================================
   卡牌轮播容器
   ============================================================ */
.carousel {
    width: 800px;
    max-width: 92vw;
    position: relative;
}

.carousel-viewport {
    position: relative;
    height: 360px;
    perspective: 1400px;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* ============================================================
   单张卡牌
   ============================================================ */
.card {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid rgba(245, 56, 248, 0.5);
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-glow);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    transform: translateX(100%) rotateY(5deg) scale(0.96);
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), box-shadow 0.3s var(--ease);
    pointer-events: none;
    will-change: transform, opacity;
}

/* 当前激活卡牌 */
.card.is-active {
    opacity: 1;
    transform: translateX(0) rotateY(0) scale(1);
    pointer-events: auto;
}

/* ---- 向左滑动（swipeLeft / next）：当前卡牌向左滑出 ---- */
.card.is-prev {
    opacity: 0;
    transform: translateX(-100%) rotateY(-5deg) scale(0.96);
}

/* ---- 向右滑动（swipeRight / prev）：当前卡牌向右滑出 ---- */
.card.is-next {
    opacity: 0;
    transform: translateX(100%) rotateY(5deg) scale(0.96);
}

/* ---- 向右滑动时：新卡牌先瞬时定位到左侧（无过渡） ----
   配合 JS：先加 to-left 跳到左侧 → 强制 reflow → 移除并加 is-active 触发动画 */
.card.to-left {
    opacity: 0;
    transform: translateX(-100%) rotateY(-5deg) scale(0.96);
    transition: none; /* 关键：瞬时跳转，不产生中间动画 */
}

/* 悬停：上浮 + 阴影加深 */
.card:hover {
    transform: translateX(0) translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-hover);
    border-color: rgba(56, 189, 248, 0.45);
}

/* ---- 卡牌头部：序号 + 文件路径 ---- */
.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.card-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.12);
    color: #d2a8ff;
    font-size: 0.8rem;
    border: 1px solid rgba(56, 189, 248, 0.3);
}
.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}
.card-title { color: #fff; }

.accent { color: #9869ce; }

/* ============================================================
   代码块区域
   ============================================================ */
.code-block {
    flex: 1;
    background: var(--bg-code);
    border: 1px solid var(--color-code-border);
    border-radius: 8px;
    padding: 16px 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    overflow: auto;
    position: relative;
    margin: 0;
}
/* 代码块顶部 macOS 风格红黄绿圆点 */
.code-block::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f56;  /* 红 */
    box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f;  /* 黄、绿 */
}
.code-block pre {
    margin: 22px 0 0;
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- 语法高亮配色 ---- */
.tk-key { color: #ff7b72; }                              /* 关键字：def/class/import/return 等 */
.tk-fn  { color: #d2a8ff; }                              /* 函数名 */
.tk-str { color: #a5d6ff; }                              /* 字符串 */
.tk-num { color: #79c0ff; }                              /* 数字 */
.tk-com { color: #8b949e; font-style: italic; }          /* 注释 */
.tk-var { color: #ffa657; }                              /* 变量：self/__name__ 等 */
.tk-op  { color: var(--color-purple); }                  /* 运算符：= == 等 */

/* ============================================================
   卡牌内"进入"按钮
   ============================================================ */
.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    text-decoration: none;
    color: #dbcdff;
    background: linear-gradient(90deg, var(--color-accent), var(--color-purple));
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-mono);
    border: none;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
}
.card-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
}
.card-cta:active { transform: translateY(1px); }
.card-cta .arrow { transition: transform 0.2s var(--ease); }
.card-cta:hover .arrow { transform: translateX(4px); }

/* ============================================================
   左右切换箭头
   ============================================================ */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-text);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease);
    z-index: 5;
}
.nav-arrow:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}
.nav-arrow.prev { left: -22px; }
.nav-arrow.next { right: -22px; }

/* ============================================================
   底部指示点
   ============================================================ */
.dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--color-muted);
    opacity: 0.5;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width 0.4s var(--ease), background 0.4s var(--ease), opacity 0.4s var(--ease);
}
/* 激活态：宽度 8px → 24px，变为高亮色 */
.dot.is-active {
    width: 24px;
    background: var(--color-accent);
    opacity: 1;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

/* ============================================================
   提示文字
   ============================================================ */
.hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    text-align: center;
    margin-top: 4px;
    opacity: 0.7;
}
.hint kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.6);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text);
}

/* ============================================================
   响应式适配
   分档断点：768px（平板/大手机）、480px（普通手机）、360px（小屏手机）
   另外处理横屏情况，避免内容被裁切
   ============================================================ */

/* ---- 平板及大手机 ---- */
@media (max-width: 768px) {
    body { gap: 20px; padding: 20px 0; }
    .page-title {
        font-size: 1.15rem;
        padding: 6px 14px;
        letter-spacing: 0;
    }
    /* 卡牌容器撑满视口宽度（留出两侧边距） */
    .carousel { width: 92vw; max-width: 100%; }
    /* 高度自适应：用 vh 让卡牌撑满可用高度 */
    .carousel-viewport { height: 70vh; min-height: 460px; max-height: 600px; }
    .card { padding: 20px; gap: 14px; }
    .card-header { font-size: 0.78rem; gap: 8px; }
    .card-index { min-width: 24px; height: 22px; font-size: 0.72rem; }
    .card-title { font-size: 1.15rem; }
    .code-block { font-size: 0.78rem; padding: 14px; }
    .code-block pre { margin-top: 20px; }
    /* 移动端隐藏左右箭头，靠滑动操作 */
    .nav-arrow { display: none; }
    .dots { margin-top: 18px; gap: 8px; }
    .hint { font-size: 0.7rem; }
}

/* ---- 普通手机 ---- */
@media (max-width: 480px) {
    body { gap: 14px; padding: 16px 0; }
    .page-title {
        font-size: 0.95rem;
        padding: 5px 10px;
        letter-spacing: 0;
        width: 92vw;
        max-width: 100%;
    }
    .carousel { width: 94vw; }
    /* 高度收紧，让代码块与按钮都在可视区 */
    .carousel-viewport { height: auto; min-height: 0; max-height: none; }
    .card {
        position: relative;          /* 改为相对定位，自适应高度 */
        padding: 16px;
        gap: 12px;
    }
    /* 仅激活卡牌参与布局，其他卡牌绝对定位覆盖在上方（隐藏） */
    .card:not(.is-active) {
        position: absolute;
        inset: 0;
        visibility: hidden;
        opacity: 0;
        transition: none;
    }
    .card-header { font-size: 0.72rem; }
    .card-index { min-width: 22px; height: 20px; font-size: 0.68rem; padding: 0 6px; }
    .card-title { font-size: 1.05rem; }
    .code-block {
        font-size: 0.72rem;
        padding: 12px;
        max-height: 40vh;            /* 代码块单独限制高度，超出滚动 */
    }
    .code-block pre { margin-top: 18px; }
    .card-cta {
        padding: 9px 18px;
        font-size: 0.85rem;
    }
    .dots { margin-top: 14px; gap: 7px; }
    .hint { font-size: 0.65rem; }
}

/* ---- 小屏手机（≤360px）---- */
@media (max-width: 360px) {
    .page-title { font-size: 0.85rem; padding: 4px 8px; }
    .card { padding: 14px 12px; }
    .card-title { font-size: 0.95rem; }
    .code-block { font-size: 0.66rem; padding: 10px; }
    .card-cta { padding: 8px 14px; font-size: 0.78rem; }
}

/* ---- 横屏适配（手机/小平板横放）----
   横屏时高度有限，卡牌改为左右布局并限制总高度 */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    body { gap: 10px; padding: 10px 0; }
    .page-title { font-size: 0.95rem; padding: 4px 12px; }
    .carousel { width: 96vw; }
    .carousel-viewport {
        height: 78vh;
        min-height: 0;
        max-height: 360px;
    }
    .card { padding: 14px 18px; gap: 10px; }
    .card-header { font-size: 0.72rem; }
    .card-title { font-size: 1rem; }
    .code-block {
        font-size: 0.7rem;
        padding: 10px 12px;
        max-height: 38vh;
    }
    .code-block pre { margin-top: 16px; }
    .card-cta { padding: 7px 16px; font-size: 0.8rem; }
    .nav-arrow { display: none; }
    .dots { margin-top: 10px; }
}

/* ---- 极小高度兜底（避免内容溢出视口）---- */
@media (max-height: 600px) and (max-width: 768px) {
    .carousel-viewport { min-height: 0; }
    .code-block { max-height: 30vh; }
}