/*
 * MythArena 案例详情页专属样式 —— template-parts/case/mytharena.php。
 *
 * 和站内其他案例最大的不同是首屏：深色奇幻底图 + 通栏出血，下面才切回浅色卡片流。
 * 所以另起 fl-ma- 前缀单开一份，由 functions.php 的「案例 slug 有同名 CSS 就入队」
 * 规则只在这一页加载。按钮沿用 rich-page.css 的 fl-cd-btn*。
 */

.fl-ma{
    --ma-p:#6d47e8;          /* 主色 */
    --ma-p2:#8b62f5;         /* 渐变末端 */
    --ma-p-soft:#f2eeff;     /* 主色底纹 */
    --ma-p-line:#e3dafb;     /* 主色描边 */
    --ma-ink:#1a1533;        /* 标题 */
    --ma-body:#56536f;       /* 正文 */
    --ma-mute:#8b88a6;       /* 次要说明 */
    --ma-faint:#a9a6c0;      /* 更弱的补充 */
    --ma-line:#ecebf5;       /* 卡片描边 */
    --ma-up:#15a35c;         /* 增长 */
    --ma-down:#e0495a;       /* 问题项 */
    --ma-dark:#140f2e;       /* 深色块兜底 */
    color:var(--ma-body);
}
.fl-ma .fl-cd-btn-primary{background:linear-gradient(135deg,var(--ma-p),var(--ma-p2));box-shadow:0 8px 22px rgba(109,71,232,.34)}
.fl-ma .fl-cd-btn-primary:hover{box-shadow:0 12px 28px rgba(109,71,232,.42)}

/* 通栏出血：模板 part 被包在定宽的 .fl-cd-inner 里，首屏要顶到浏览器两边。
   overflow-x:clip 挡住 100vw 与滚动条宽度的差，且不会新建滚动容器。 */
.fl-cd:has(.fl-ma){background:#fbfafe;overflow-x:clip}
.fl-ma-bleed{width:100vw;margin-left:calc(50% - 50vw)}

/* 通用段落骨架 */
.fl-ma-sec{margin-top:26px}
.fl-ma-card{background:#fff;border:1px solid var(--ma-line);border-radius:16px}
.fl-ma-eyebrow{display:block;font-size:12.5px;font-weight:800;letter-spacing:.18em;color:var(--ma-p)}
.fl-ma-h2{font-size:21.5px;font-weight:800;letter-spacing:-.025em;color:var(--ma-ink)}
.fl-ma-h3{font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ma-ink)}

/* ================= 首屏（深色出血） ================= */
.fl-ma-hero{position:relative;padding:37px 0 28px;background-color:var(--ma-dark);
    background-repeat:no-repeat;background-position:center top;background-size:cover;overflow:hidden}
/* 底图右侧比较亮，压一层从左到右的暗罩保证左边文案可读 */
.fl-ma-hero::before{content:'';position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(12,8,32,.94) 0%,rgba(14,9,38,.72) 42%,rgba(18,12,48,.24) 72%,rgba(18,12,48,.05) 100%)}
.fl-ma-hero-inner{position:relative;max-width:1240px;width:79%;margin:0 auto}
.fl-ma-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:24px;align-items:center}
.fl-ma-tagline{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.fl-ma-chip{padding:5px 14px;border-radius:8px;background:var(--ma-p);font-size:13px;font-weight:700;color:#fff}
.fl-ma-tagline span:last-child{font-size:14px;color:rgba(255,255,255,.72)}
.fl-ma-hero h1{margin:16px 0 10px;font-size:53px;font-weight:900;line-height:1.02;letter-spacing:-.05em;color:#fff}
.fl-ma-hero h1 i{font-style:normal;color:#a487ff}
.fl-ma-hero-sub{font-size:26px;font-weight:800;letter-spacing:-.03em;color:#fff}
.fl-ma-hero-desc{margin-top:16px;max-width:440px;font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.66)}
.fl-ma-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.fl-ma-hero .fl-cd-btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#fff}
.fl-ma-hero .fl-cd-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.fl-ma-hero-art{line-height:0;margin-bottom:-18px}
.fl-ma-hero-art img{width:100%;height:auto;display:block}

/* 首屏数据条 */
.fl-ma-hkpis{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
    margin:26px 0 0;padding:19px 26px;border:1px solid rgba(255,255,255,.14);border-radius:16px;
    background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.fl-ma-hkpi{display:flex;align-items:center;gap:11px;padding:0 17px;border-left:1px solid rgba(255,255,255,.14);min-width:0}
.fl-ma-hkpi:first-child{border-left:0;padding-left:0}
.fl-ma-hkpi img{flex-shrink:0;width:26px;height:26px;object-fit:contain}
.fl-ma-hkpi b{display:block;font-size:22.5px;font-weight:800;letter-spacing:-.035em;line-height:1.15;color:#fff}
.fl-ma-hkpi small{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.6)}

/* ================= 项目定位 / 目标用户 ================= */
.fl-ma-about{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:26px;align-items:start;margin-top:30px}
.fl-ma-about-copy p{margin-top:12px;font-size:14px;line-height:2;color:var(--ma-mute)}
.fl-ma-about-copy .fl-ma-h2{margin-top:8px}
.fl-ma-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.fl-ma-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--ma-line);
    border-radius:9px;background:#fff;font-size:13px;font-weight:600;color:#4a4470}
.fl-ma-tag img{width:14px;height:14px;object-fit:contain}
.fl-ma-users{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.fl-ma-user{padding:22px 15px;text-align:center;background:#fff;border:1px solid var(--ma-line);border-radius:14px;
    transition:transform .3s,box-shadow .3s,border-color .3s}
.fl-ma-user:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(26,21,51,.08);border-color:var(--ma-p-line)}
.fl-ma-user img{width:auto;height:38px;margin-bottom:12px}
.fl-ma-user h4{font-size:15px;font-weight:800;color:var(--ma-ink)}
.fl-ma-user p{margin-top:7px;font-size:12.5px;line-height:1.7;color:var(--ma-mute)}

/* ================= 问题 VS 方案 + 经济闭环 ================= */
.fl-ma-vs{display:grid;grid-template-columns:minmax(0,.52fr) auto minmax(0,1.48fr);gap:16px;align-items:stretch}
.fl-ma-vs-panel{padding:24px 22px;border-radius:16px;border:1px solid}
.fl-ma-vs-panel--bad{background:#fdf5f6;border-color:#f7e3e6}
.fl-ma-vs-panel--good{background:#fff;border-color:var(--ma-line)}
.fl-ma-vs-panel .fl-ma-eyebrow{letter-spacing:.02em;font-size:13px}
.fl-ma-vs-panel--bad .fl-ma-eyebrow{color:var(--ma-down)}
.fl-ma-vs-panel h3{margin:8px 0 16px;font-size:18.5px;font-weight:800;letter-spacing:-.02em;color:var(--ma-ink)}
.fl-ma-vs-panel ul{display:flex;flex-direction:column;gap:12px}
.fl-ma-vs-panel li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.65}
.fl-ma-vs-panel li svg{flex-shrink:0;margin-top:2px}
.fl-ma-vs-panel--bad li{color:#7f5f66}
.fl-ma-vs-panel--good li{color:var(--ma-body)}
.fl-ma-vs-mark{display:flex;align-items:center;justify-content:center;font-size:20.5px;font-weight:900;
    font-style:italic;letter-spacing:-.04em;color:var(--ma-p)}
.fl-ma-vs-body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:20px;align-items:center}
/* 闭环图里的文字是 SVG 内的固定字号，容器一窄就缩得看不清。
   给它一个最小宽度，窄屏下让它在自己的容器里横向滚动，而不是整体缩小。 */
.fl-ma-loop{min-width:0;line-height:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.fl-ma-loop::-webkit-scrollbar{display:none}
.fl-ma-loop svg{width:100%;min-width:380px;height:auto;display:block}

/* ================= 经济系统设计框架 ================= */
.fl-ma-frame{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none}
.fl-ma-frame::-webkit-scrollbar{display:none}
.fl-ma-fcard{flex:1 1 0;min-width:196px;display:flex;flex-direction:column;padding:19px 17px;
    background:#fff;border:1px solid var(--ma-line);border-radius:14px}
.fl-ma-fcard-head{display:flex;align-items:baseline;gap:8px}
.fl-ma-fcard-no{font-size:15.5px;font-weight:900;letter-spacing:-.02em;color:var(--ma-p)}
.fl-ma-fcard-head h4{font-size:15px;font-weight:800;color:var(--ma-ink)}
.fl-ma-fcard>p{margin-top:6px;font-size:12.5px;line-height:1.65;color:var(--ma-mute)}
.fl-ma-fcard-art{margin-top:14px;line-height:0}
.fl-ma-fcard-art svg{width:100%;height:auto;display:block}
.fl-ma-frame-sep{flex:0 0 24px;display:flex;align-items:center;justify-content:center;color:#c9bff2}
/* 04 的收入来源清单 */
.fl-ma-rev{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.fl-ma-rev li{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;
    background:var(--ma-p-soft);font-size:13px;font-weight:600;color:#4a4470}
.fl-ma-rev li img{width:15px;height:15px;object-fit:contain;flex-shrink:0}

/* ================= 赛季数据 + 成长路径 ================= */
.fl-ma-split{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;align-items:stretch}
.fl-ma-split>section{padding:24px;background:#fff;border:1px solid var(--ma-line);border-radius:16px}
.fl-ma-split h3{margin-bottom:16px}
.fl-ma-season{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.fl-ma-scell{display:flex;flex-direction:column;padding:14px 12px;border:1px solid var(--ma-line);border-radius:12px;background:#fdfcff}
.fl-ma-scell b{font-size:20.5px;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--ma-p)}
.fl-ma-scell small{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:var(--ma-mute)}
.fl-ma-scell em{display:block;margin-top:4px;font-style:normal;font-size:12px;font-weight:700;color:var(--ma-up)}
.fl-ma-spark{margin-top:auto;padding-top:10px;line-height:0}
.fl-ma-spark svg{width:100%;height:auto;display:block}
/* 成长路径 */
.fl-ma-path{display:flex;align-items:flex-start;justify-content:space-between;gap:0}
.fl-ma-rank{flex:1 1 0;text-align:center;min-width:0}
.fl-ma-rank img{width:66px;height:66px;display:block;margin:0 auto 10px;object-fit:contain}
.fl-ma-rank b{display:block;font-size:13px;font-weight:800;color:var(--ma-ink)}
.fl-ma-path-sep{flex:0 0 20px;display:flex;align-items:center;justify-content:center;padding-top:20px;color:#c9bff2}

/* ================= 技术亮点 + 项目成果 ================= */
.fl-ma-tech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fl-ma-tcell{padding:15px 13px;border:1px solid var(--ma-line);border-radius:12px;background:#fdfcff}
.fl-ma-tcell-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fl-ma-tcell-head img{width:19px;height:19px;object-fit:contain;flex-shrink:0}
.fl-ma-tcell-head b{font-size:13px;font-weight:800;line-height:1.3;color:var(--ma-ink)}
.fl-ma-tcell p{font-size:12px;line-height:1.65;color:var(--ma-mute)}
.fl-ma-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.fl-ma-result b{display:block;font-size:22.5px;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--ma-p)}
.fl-ma-result small{display:block;margin-top:5px;font-size:12.5px;color:var(--ma-mute)}

/* ================= 底部 CTA ================= */
.fl-ma-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;
    margin:26px 0 60px;padding:35px 39px;border-radius:18px;overflow:hidden;position:relative;
    background-color:var(--ma-dark);background-repeat:no-repeat;background-position:center;background-size:cover}
.fl-ma-cta::before{content:'';position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(14,9,36,.9) 0%,rgba(18,12,48,.66) 55%,rgba(22,15,58,.32) 100%)}
.fl-ma-cta-copy{position:relative;min-width:0}
.fl-ma-cta h2{font-size:25px;font-weight:800;letter-spacing:-.025em;color:#fff}
.fl-ma-cta p{margin-top:9px;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.7)}
.fl-ma-cta-actions{position:relative;display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}
.fl-ma-cta .fl-cd-btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.fl-ma-cta .fl-cd-btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.46);color:#fff}

/* ================= 响应式 ================= */
@media(max-width:1280px){
    .fl-ma-hero-inner{width:92%}
    .fl-ma-hero h1{font-size:45px}
    .fl-ma-hero-sub{font-size:23px}
    .fl-ma-season{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1080px){
    .fl-ma-hero-grid{grid-template-columns:1fr;gap:18px}
    .fl-ma-hero-art{max-width:560px;margin:0 auto -18px}
    .fl-ma-hero-desc{max-width:none}
    .fl-ma-hkpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 0}
    .fl-ma-hkpi:nth-child(3n+1){border-left:0;padding-left:0}
    .fl-ma-about{grid-template-columns:1fr;gap:22px}
    .fl-ma-users{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fl-ma-vs{grid-template-columns:1fr;gap:12px}
    .fl-ma-vs-mark{padding:2px 0}
    .fl-ma-vs-body{grid-template-columns:1fr;gap:16px}
    .fl-ma-split{grid-template-columns:1fr}
    .fl-ma-tech{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
    .fl-ma-sec{margin-top:18px}
    .fl-ma-hero{padding-top:22px}
    .fl-ma-hero-inner{width:100%;padding:0 17px}
    .fl-ma-hero h1{font-size:33.5px}
    .fl-ma-hero-sub{font-size:19.5px}
    .fl-ma-hero-desc{font-size:14px}
    .fl-ma-hero-actions{width:100%}
    .fl-ma-hero-actions .fl-cd-btn{flex:1 1 auto}
    .fl-ma-hkpis{grid-template-columns:repeat(2,minmax(0,1fr));padding:17px 15px;gap:16px 0}
    .fl-ma-hkpi{padding:0 9px}
    .fl-ma-hkpi:nth-child(odd){border-left:0;padding-left:0}
    .fl-ma-hkpi b{font-size:19.5px}
    .fl-ma-users{grid-template-columns:1fr}
    .fl-ma-frame{gap:10px}
    .fl-ma-frame-sep{display:none}
    .fl-ma-fcard{flex:0 0 236px}
    .fl-ma-season{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fl-ma-path{flex-wrap:wrap;gap:14px 0}
    .fl-ma-rank{flex:0 0 50%}
    .fl-ma-rank img{width:56px;height:56px}
    .fl-ma-path-sep{display:none}
    .fl-ma-tech{grid-template-columns:1fr}
    .fl-ma-results{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fl-ma-cta{flex-direction:column;align-items:flex-start;gap:20px;margin:18px 0 44px;padding:26px 22px}
    .fl-ma-cta h2{font-size:20.5px}
    .fl-ma-cta-actions{width:100%}
    .fl-ma-cta-actions .fl-cd-btn{flex:1 1 150px}
}

@media(prefers-reduced-motion:reduce){
    .fl-ma-user{transition:none}
    .fl-ma-user:hover{transform:none}
}