/* 奶蛙大乱斗官网 —— 只写游戏站新增的部分。
   配色 / 圆角 / 阴影 / 字体全部沿用 base.css 的 CSS 变量与 layout.css、components.css 的既有组件，
   所以视觉与奶蛙大本营图片站保持一致（含日间 / 夜间双主题）。
   注意：这里不引入任何字体文件，base.css 用的是系统字体栈。*/

/* ---------------- 通用：区块与容器 ---------------- */

.g-section{padding:56px 0 8px}
.g-section:first-of-type{padding-top:24px}
.g-lead{color:var(--text-muted);font-size:14px;line-height:1.85;max-width:760px}
.g-lead b{color:var(--text)}

/* ---------------- 首屏 ---------------- */

.hero{padding:40px 0 8px;text-align:center}
.hero-badge{margin-bottom:18px}
.hero-title{
  font-family:var(--font-serif);
  font-size:clamp(34px,6.4vw,62px);
  line-height:1.1;letter-spacing:.04em;margin:0 0 6px;
  color:var(--text);
}
.hero-title em{
  font-style:normal;display:block;
  font-size:.46em;letter-spacing:.34em;margin-top:12px;
  color:var(--primary);
}
.hero-sub{
  color:var(--text-muted);font-size:15px;line-height:1.9;
  max-width:620px;margin:16px auto 0;
}
.hero-cta{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin:26px 0 30px;
}

/* ---------------- 占位图 / 占位视频 ----------------
   这两个类是"待填素材"的统一外观：虚线框 + 尺寸提示。
   填真素材时把 .ph 元素整块换掉即可，具体见各处的 HTML 注释与 assets/promo/README.md */

.ph{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--surface-2);
  color:var(--text-faint);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:22px;text-align:center;font-size:12.5px;line-height:1.7;
}
.ph strong{color:var(--text-muted);font-size:13.5px;font-weight:600;letter-spacing:.03em}
.ph em{font-style:normal;color:var(--text-faint);font-size:11.5px}
/* 占位框里的图形：与图片站同一套 Lucide 画法（24×24、stroke 2、currentColor）。
   .ph-ic 必须是块级，否则 span 是行内元素、宽高不生效，图标会塌掉。 */
.ph-ic{display:block;width:34px;height:34px;opacity:.45}
.ph-ic svg{width:100%;height:100%;display:block}

/* 主视觉：16:9 */
.hero-media{margin-top:6px}
.hero-media .ph{aspect-ratio:16/9;width:100%}

/* 宣传图：三列网格，每格 4:3 */
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shot-grid .ph{aspect-ratio:4/3}

/* 宣传视频：16:9，居中且限宽 */
.video-wrap{max-width:900px;margin:0 auto}
.video-wrap .ph{aspect-ratio:16/9}
.video-wrap video,
.video-wrap iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-md);display:block}

/* 武器 / 角色卡位：小方框。
   角色位里放的是手绘矢量奶蛙（.slot-art），不是占位框。 */
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.slot-grid .ph{aspect-ratio:1/1}

.slot-art{
  aspect-ratio:1/1;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.slot-art svg{width:62%;height:62%;display:block}
.slot-art strong{font-size:13.5px;color:var(--text-muted);font-weight:600;letter-spacing:.03em}
.slot-art em{font-style:normal;font-size:11.5px;color:var(--text-faint)}

/* ---------------- 首屏装饰：矢量奶蛙 ---------------- */

.hero-mascot{width:118px;height:118px;display:block;margin:0 auto 14px}
@media (max-width:560px){ .hero-mascot{width:92px;height:92px;margin-bottom:10px} }

/* ---------------- 玩法特色 ---------------- */

.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature-icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:var(--radius-md);
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.feature-icon svg{width:21px;height:21px}
.feature h3{font-size:15px;margin:2px 0 6px;letter-spacing:.02em}
.feature p{color:var(--text-muted);font-size:13px;line-height:1.8;margin:0}

/* ---------------- 数值/信息条 ---------------- */

.fact-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fact{
  border:1px solid var(--border);border-radius:var(--radius-full);
  padding:6px 14px;font-size:12.5px;color:var(--text-muted);background:var(--surface);
}
.fact b{color:var(--text);font-weight:600}

/* ---------------- 下载 / 预约 ---------------- */

.dl-panel{text-align:center}
.dl-panel .btn{margin:0 6px}
.dl-note{color:var(--text-faint);font-size:12px;margin-top:14px;line-height:1.8}

/* ---------------- 小屏适配 ---------------- */

@media (max-width:900px){
  .feature-grid{grid-template-columns:1fr}
  .shot-grid{grid-template-columns:repeat(2,1fr)}
  .slot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .shot-grid,.slot-grid{grid-template-columns:1fr}
  .g-section{padding:40px 0 4px}
  .hero{padding:26px 0 4px}
}