/* ============================================================
   《又菜又爱玩》项目发布大厅
   深色霓虹 + 瀑布流 + 3D 翻牌卡片
   ============================================================ */

:root {
    --bg: #07090f;
    --ink: #e9eef7;
    --dim: #7d879c;
    --edge: rgba(255, 255, 255, 0.08);
    --card1: #141a26;
    --card2: #0d1119;
    /* 卡片外框统一色（所有卡片同一圈颜色，悬停时加亮）；
       卡片各自的 accent 仍用于编号 / 标签 / CTA / 光晕，保留个性 */
    /* 外框：各自主题色（accent）。--frame 仅作无 accent 时的兜底 */
    --frame: rgba(94, 234, 212, 0.42);
    --frame-hot: rgba(94, 234, 212, 0.95);
    /* 卡片高度按视口自适应：目标是首屏放得下 3 列 × 2 行 = 6 个项目。
       减去的 320px ≈ 表头 + 页脚 + 行间距的占用。改这里即可整体调卡片大小。
       ⚠️ 下限 212→232：原下限下短视口卡片被压扁，背面长描述会把底部标签顶出
       .back-body 的 overflow:hidden 被裁掉（"下面标签被挡"）；抬高下限给正反面留呼吸。 */
    --card-h: clamp(232px, calc((100vh - 320px) / 2), 330px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.lobby { position: relative; min-height: 100vh; padding: 30px 28px 24px; }

/* ---------------- 背景 ---------------- */

.lobby-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.lobby-glow {
    position: absolute;
    top: -20vh; left: 50%;
    width: 120vw; height: 90vh;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse 40% 55% at 30% 30%, rgba(167, 139, 250, 0.18), transparent 70%),
        radial-gradient(ellipse 40% 55% at 70% 40%, rgba(94, 234, 212, 0.14), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 10%, rgba(96, 165, 250, 0.12), transparent 72%);
    filter: blur(10px);
}

.lobby-grid {
    position: absolute; inset: 0;
    background:
        linear-gradient(rgba(140, 160, 200, 0.045) 1px, transparent 1px) 0 0 / 100% 64px,
        linear-gradient(90deg, rgba(140, 160, 200, 0.045) 1px, transparent 1px) 0 0 / 64px 100%;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 25%, transparent 78%);
}

/* ---------------- 门头 ---------------- */

/* 表头整体缩小，给首屏 6 张卡腾出空间 */
.lobby-header { position: relative; z-index: 2; text-align: center; margin-bottom: 26px; }

.lobby-kicker {
    font-size: 10px;
    letter-spacing: 0.5em;
    color: var(--dim);
    margin-bottom: 8px;
}

.lobby-title {
    font-size: clamp(30px, 4.6vw, 54px);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 20%, #9aa7bd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lobby-title span {
    background: linear-gradient(100deg, #5eead4, #a78bfa 45%, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* —— 拆字后（JS 加 .split）：渐变下沉到每个字窗的 <i> 上 ——
   ⚠️ Chrome bug：祖先 background-clip:text + 子孙 overflow:hidden/filter 叠加，
   字形会被画到视口左上角。所以拆字后祖先链必须摘掉 background-clip:text，
   光晕才能安全挂在字窗（.tl-ch）上。 */
.lobby-title.split,
.lobby-title.split > span {
    background: none;
}
.lobby-title.split .tl-ch {
    filter: drop-shadow(0 0 26px rgba(167, 139, 250, 0.35));
}

/* ---------------- 标题原地逐字跑马灯（鼠标不动时） ----------------
   每个字是一个 1.12em 高的窗口，里面竖排一条字带：
   自己的字 → 其它字轮一圈 → 再回到自己的字。
   字带滚到底显示的仍是自己的字，首尾同形 → 循环处无跳变，看着就是无限滚。
   逐字错开出发形成左→右的波浪；滚完 42% 后停顿一阵再下一轮。 */
.lobby-title {
    --tl-ch: 1.12em;        /* 单字窗口高（= 字带每格高） */
    --tl-dur: 2600ms;       /* 一轮时长 */
    --tl-stagger: 130ms;    /* 逐字出发间隔 */
}
.lobby-title .tl-ch {
    display: inline-block;
    height: var(--tl-ch);
    overflow: hidden;
    vertical-align: bottom;
}
.lobby-title .tl-strip { display: block; will-change: transform; }
.lobby-title .tl-strip > i {
    display: block;
    font-style: normal;
    height: var(--tl-ch);
    line-height: var(--tl-ch);
}
.lobby-title.rolling .tl-strip {
    animation: tl-roll var(--tl-dur) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    animation-delay: calc(var(--tl-i, 0) * var(--tl-stagger));
}
@keyframes tl-roll {
    0%   { transform: translateY(0); }
    42%  { transform: translateY(calc(var(--tl-n, 5) * var(--tl-ch) * -1)); }
    100% { transform: translateY(calc(var(--tl-n, 5) * var(--tl-ch) * -1)); }
}

.lobby-sub { margin-top: 10px; font-size: 13.5px; color: var(--dim); letter-spacing: 0.06em; }

.lobby-meta {
    margin-top: 8px;
    font-size: 11.5px;
    color: rgba(125, 135, 156, 0.85);
}
.dot-sep { margin: 0 8px; opacity: 0.5; }

/* ---------------- 卡片墙（等大网格） ---------------- */

/* 卡片统一尺寸：改 grid-auto-rows 一处即全部生效 */
.wall {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: var(--card-h);
    gap: 20px;
}
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .wall { grid-template-columns: 1fr; } }

/* --- 翻牌容器 --- */
.flip {
    height: 100%;
    perspective: 1400px;
    cursor: pointer;
    /* 入场：从下方淡入（翻牌由 JS 随机延迟触发）
       ⚠️ 两个坑都踩过：
       · fill 用 backwards（delay 期间应用 from），不能用 both —— both 会在结束后
         永久占用 transform，把洗牌 FLIP 的 inline transform 盖掉，卡片飞出视野；
       · 基础样式绝不写 opacity:0 —— backwards 结束后回到基础样式，写了就全体隐身。
         所以 keyframes 只写 from，终点交给元素默认值。 */
    animation: card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(26px); }
}

.flip-inner {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    /* 翻牌时长由 JS 按洗牌速度动态设置（--flip-dur），悬停时用默认 0.75s */
    transition: transform var(--flip-dur, 0.75s) cubic-bezier(0.4, 0.05, 0.2, 1);
}
/* 已翻到背面（背面图案朝前） */
.flip.flipped .flip-inner { transform: rotateY(180deg); }

.face {
    border-radius: 20px;
    border: 2px solid var(--accent-frame, var(--frame));   /* 各自主题外框（1.5px 在 1x 屏会被舍成 1px，偏细） */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
/* 正面撑满卡片高度（背面 absolute 铺满），内容竖排、CTA 贴底 */
.face-front {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, var(--card1), var(--card2));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}
.flip:hover .face-front {
    border-color: var(--accent, var(--frame-hot));
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 44px var(--glow);
}
.face-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    background: #0b0e15;
    display: flex;                      /* 介绍区占满剩余高度 + 底部 CTA 贴底 */
    flex-direction: column;
}

/* --- 正面排版 --- */

.card-top {
    position: relative;
    flex: 1 1 auto;                     /* 封面吸收标题与提示之外的剩余高度 */
    min-height: 92px;
    background: var(--cover);           /* 由 JS 生成（与背面同系列图案，低饱和版） */
    border-bottom: 1px solid var(--edge);
}
.card-top::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7, 9, 15, 0.15), rgba(7, 9, 15, 0.86));
}

/* 正面大序号：绝对居中于卡片正中（压在封面图案上），放大成视觉焦点 */
.card-no {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
    pointer-events: none;               /* 不挡卡片点击/悬停 */
}

/* 小图标：放到顶部标题前（card-head 内，与标题同行） */
.card-emoji {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

/* 正面顶部：小图标 + 标题 同行（图标在前） */
.card-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid var(--edge);
}

.card-title {
    flex: 1 1 auto;
    min-width: 0;                      /* 配合 ellipsis 在 flex 行内生效 */
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 正面底部只是"引导去看背面"，不是动作 → 弱化处理（真正的入口在背面） */
.card-cta-hint { color: var(--dim); font-weight: 600; }

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    max-height: 26px;
    overflow: hidden;
}
.card-tags span {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 99px;
    color: var(--accent);
    background: var(--glow);
    border: 1px solid var(--accent-edge);
}

/* CTA 永远贴卡片底部（margin-top:auto 把它推到底） */
.card-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 12px 16px 14px;
    padding-top: 11px;
    border-top: 1px solid var(--edge);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}
.card-cta .arrow { transition: transform 0.25s; }
.flip:hover .card-cta .arrow { transform: translateX(5px); }

/* 背面底部：进入导览（整张卡都可点，这里是显眼的入口提示） */
.back-cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 10px 16px 14px;
    padding-top: 11px;
    border-top: 1px solid var(--edge);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}
.back-cta .arrow { transition: transform 0.25s; }
.flip:hover .back-cta .arrow { transform: translateX(5px); }
.flip.soon .back-cta { color: var(--dim); }

/* 整圈移动时的高亮提示 —— 只加光晕，绝不碰 transform（会和 FLIP 打架） */
.flip.rotating .face-front {
    border-color: var(--accent, var(--frame-hot));
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 40px var(--glow);
}
/* 翻背波浪时卡片显示背面，背面也要有主题色高亮（否则转圈时光晕消失） */
.flip.rotating .face-back {
    border-color: var(--accent, var(--frame-hot));
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 40px var(--glow);
}

/* 「即将展出」占位卡 */
.flip.soon { cursor: default; opacity: 0.62; }
.flip.soon .card-cta { color: var(--dim); }
.flip.soon:hover .face-front { border-color: var(--accent-frame, var(--frame)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }

/* --- 背面：图案作底纹 + 网站详细介绍 --- */
.face-back .pattern { position: absolute; inset: 0; }
/* 压暗底纹，保证正文可读（图案仍透出来） */
.back-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6, 9, 14, 0.58), rgba(6, 9, 14, 0.93));
}
.back-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;                      /* 纵向排列：标题区固定，正文/tag 随内容自然撑开 */
    flex-direction: column;
    padding: 14px 16px 8px;
    /* 卡片总高被 --card-h 锁死（所有卡片等高），长介绍装不下时**内部滚动**查看，
       而不是被 overflow:hidden 直接裁掉（此前「背面介绍看不到」的根因）。
       overscroll-behavior: contain 防止滚到底后把滚动穿透给整页。 */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
/* 细滚动条：默认 15px 的经典滚动条在旋转后的卡片里太抢眼 */
.back-body::-webkit-scrollbar { width: 6px; }
.back-body::-webkit-scrollbar-track { background: transparent; }
.back-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.26);
    border-radius: 99px;
}
.back-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); }
.back-kicker {
    flex: 0 0 auto;                     /* 不被压缩，始终完整显示 */
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.55);
}
.back-no { font-weight: 900; font-size: 13px; letter-spacing: 0.06em; color: var(--accent); }
.back-title {
    flex: 0 0 auto;                     /* 不被压缩，始终完整显示 */
    font-size: 15.5px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #eef2f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 详细介绍：**完整显示**，不再按行截断。
   旧实现用 -webkit-line-clamp: 6 硬砍到 6 行，长条目（如 laya-snake 上千字）
   大半内容永久不可见。现在改为不收缩（flex: 0 0 auto），空间不足时
   由父容器 .back-body 滚动呈现 —— 内容一条不丢。 */
.back-desc {
    flex: 0 0 auto;
    font-size: 12.5px;
    line-height: 1.72;
    color: #b9c3d4;
}
.back-body .card-tags { flex: 0 0 auto; margin-top: 10px; }  /* 标签固定高度，永不被裁 */

/* ---------------- 页脚 ---------------- */

.lobby-footer {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    text-align: center;
    font-size: 11.5px;
    color: rgba(125, 135, 156, 0.6);
}