/* ============================================================
 * 摸鱼 · moyu.css — 大厅页（无框星空风，与月下问运同一设计语言）
 * 注意：博客 custom.css 给 div#page 配了卡片底色（夜间模式带 !important），
 * 这里用 #body-wrap.type-moyu 提高优先级压过它（仅本页生效）。
 * ============================================================ */
.type-moyu div#page,
[data-theme="dark"] .type-moyu div#page {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
}
/* 本页自带品牌头，隐藏主题页面标题 */
.page-title { display: none !important; }

#moyu-app {
  --m-line: rgba(232, 217, 160, 0.16);
  --m-gold: #e8d9a0;
  --m-gold-dim: #c9bd8e;
  --m-text: #e6e4dc;
  --m-muted: #8f8e9a;
  --m-card: rgba(20, 20, 31, 0.72);
  max-width: 1020px;
  margin: 0 auto;
  padding: 26px 6px 40px;
  color: var(--m-text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Hero ---------- */
.m-header { text-align: center; padding: 26px 10px 30px; }
.m-fish { color: var(--m-gold); opacity: .9; margin-bottom: 10px; }
.m-title {
  margin: 0; font-size: 40px; letter-spacing: 16px; text-indent: 16px;
  font-weight: 600; color: var(--m-text);
  font-family: "Noto Serif SC", "Source Han Serif SC", "STZhongsong", "SimSun", serif;
}
.m-sub { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: 4px; color: var(--m-muted); }
.m-motto { margin: 16px auto 0; max-width: 460px; color: var(--m-muted); font-size: 14px; }

/* ---------- 卡片墙 ---------- */
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.m-card {
  border: 1px solid var(--m-line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(232, 217, 160, 0.035), rgba(232, 217, 160, 0.012)), var(--m-card);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative; overflow: hidden;
}
.m-card:hover { transform: translateY(-4px); border-color: rgba(232, 217, 160, .38); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }

/* 月下问运 featured 大卡：独占一行 */
.m-featured {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 20px; padding: 30px 34px; text-decoration: none; color: inherit;
  background:
    radial-gradient(420px 180px at 88% 40%, rgba(232, 217, 160, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(232, 217, 160, 0.035), rgba(232, 217, 160, 0.012)),
    var(--m-card);
}
.m-card-tag {
  display: inline-block; font-size: 11.5px; letter-spacing: 2px; color: var(--m-gold-dim);
  border: 1px solid rgba(232, 217, 160, .3); border-radius: 999px; padding: 2px 10px; margin-bottom: 12px;
}
.m-card-title {
  margin: 0 0 4px; font-size: 27px; letter-spacing: 5px; font-weight: 600; color: var(--m-gold);
  font-family: "Noto Serif SC", "Source Han Serif SC", "STZhongsong", "SimSun", serif;
}
.m-card-en { display: block; font-size: 10.5px; letter-spacing: 3px; color: var(--m-muted); margin-bottom: 12px; }
.m-card-desc { margin: 0 0 18px; max-width: 520px; color: var(--m-text); opacity: .85; font-size: 14px; }
.m-card-btn {
  display: inline-block; background: linear-gradient(180deg, #efe3b6, #e2d193); color: #3a3527;
  padding: 9px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: 2px;
  box-shadow: 0 2px 14px rgba(232, 217, 160, 0.13); transition: transform .2s, box-shadow .2s;
}
.m-card-btn i { margin-left: 6px; font-size: 12px; }
.m-featured:hover .m-card-btn { transform: translateX(3px); box-shadow: 0 6px 20px rgba(232, 217, 160, 0.25); }
.m-card-art { padding-right: 10px; }
.m-card-art svg rect { fill: #f2ecd9; stroke: #b9ae8d; stroke-width: 1.5; }
.m-card-art svg path, .m-card-art svg circle { fill: none; stroke: #6b6450; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m-card-art .fan-card { transition: transform .35s; transform-box: fill-box; transform-origin: center; }
.m-card-art .fan-left { transform: translate(2px, 12px) rotate(-9deg); }
.m-card-art .fan-mid { transform: translate(72px, 2px); }
.m-card-art .fan-right { transform: translate(140px, 12px) rotate(9deg); }
.m-featured:hover .m-card-art .fan-left { transform: translate(-2px, 16px) rotate(-14deg); }
.m-featured:hover .m-card-art .fan-mid { transform: translate(72px, -2px); }
.m-featured:hover .m-card-art .fan-right { transform: translate(144px, 16px) rotate(14deg); }

/* 游戏占位卡 */
.m-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 34px 24px; min-height: 170px;
  border-style: dashed; background: rgba(20, 20, 31, 0.4);
}
.m-placeholder i { font-size: 26px; color: var(--m-gold-dim); opacity: .65; margin-bottom: 12px; }
.m-ph-title { margin: 0 0 6px; font-size: 15px; letter-spacing: 3px; color: var(--m-muted); font-weight: 600; }
.m-ph-desc { margin: 0; font-size: 12.5px; color: var(--m-muted); opacity: .7; }

/* ---------- 页脚 ---------- */
.m-foot { text-align: center; margin-top: 26px; color: var(--m-muted); font-size: 12.5px; opacity: .75; }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  #moyu-app { padding-top: 14px; }
  .m-title { font-size: 30px; letter-spacing: 10px; text-indent: 10px; }
  .m-grid { grid-template-columns: 1fr; }
  .m-featured { grid-template-columns: 1fr; padding: 24px 22px; }
  .m-card-art { padding: 4px 0 0; justify-self: center; }
  .m-card-desc { margin-bottom: 14px; }
}

/* ---------- 蓝星航线入口卡(3D 地球) ---------- */
.m-earth-card {
  background:
    radial-gradient(420px 180px at 88% 40%, rgba(110, 170, 255, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(110, 170, 255, 0.04), rgba(110, 170, 255, 0.015)),
    var(--m-card);
}
.m-earth-card:hover { border-color: rgba(120, 175, 255, .4); }
.m-earth-card .m-card-tag { color: #8fb6e0; border-color: rgba(120, 175, 255, .35); }
.m-earth-card .m-card-title { color: #9ecbff; }
.m-btn-blue { background: linear-gradient(180deg, #bcd9ff, #93bdf2) !important; color: #1d2c42 !important; box-shadow: 0 2px 14px rgba(120, 175, 255, .16) !important; }
.m-earth-card:hover .m-card-btn { box-shadow: 0 6px 20px rgba(120, 175, 255, .3) !important; }
.m-earth-card .m-card-art svg { overflow: visible; }
.m-earth-card .m-card-art .ea-orbit { fill: none; stroke: rgba(140, 190, 255, .4); stroke-width: 1.2; stroke-dasharray: 3 5; }
.m-earth-card .m-card-art .ea-orbit2 { stroke: rgba(140, 190, 255, .22); }
.m-earth-card .m-card-art .ea-globe { fill: rgba(16, 42, 82, .55); stroke: #7fb2e8; stroke-width: 1.6; }
.m-earth-card .m-card-art .ea-line { fill: none; stroke: rgba(127, 178, 232, .45); stroke-width: 1; }
.m-earth-card .m-card-art .ea-land { fill: rgba(140, 200, 255, .5); stroke: none; }
.m-earth-card .m-card-art .ea-hub { fill: #ffd166; stroke: rgba(255, 209, 102, .5); stroke-width: 6; stroke-opacity: .3; }
.m-earth-card .m-card-art .ea-arc { fill: none; stroke: #9ecbff; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 40 60; animation: ea-dash 2.6s linear infinite; }
.m-earth-card .m-card-art .ea-sat { fill: #dceeff; }
.m-earth-card .m-card-art .ea-spin { transform-origin: 105px 75px; animation: ea-spin 26s linear infinite; }
.m-earth-card .m-card-art .ea-sat { transform-origin: 105px 75px; animation: ea-sat 9s linear infinite; transform-box: view-box; }
@keyframes ea-spin { to { transform: rotate(360deg); } }
@keyframes ea-sat { from { transform: rotate(0deg) translateX(98px) rotate(0deg); } to { transform: rotate(360deg) translateX(98px) rotate(-360deg); } }
@keyframes ea-dash { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .m-earth-card .m-card-art .ea-spin, .m-earth-card .m-card-art .ea-sat, .m-earth-card .m-card-art .ea-arc { animation: none; }
}