/* brand.css — 工作室品牌签名（跨游戏通用，复制即用）
 * 原则见 casual-game-dev-playbook §15。本文件只提供结构 / 令牌 / 组件，
 * 工作室名与 --brand 色值在各游戏 :root 覆盖；具体 glyph SVG 也在各游戏内联。
 * 用法：① 在游戏 :root 覆盖 --brand 等 ② <span class="studio-mark"> 放标记
 *      ③ <div class="splash"> 做启动闪屏 ④ <div class="more-games"> 做互推面板。
 */

:root {
  --brand: #C66B3D;            /* 签名强调色：中调，浅/深主题都可读（各游戏覆盖） */
  --brand-ink: #ffffff;        /* 标记 / 主按钮上的文字色 */
  --brand-tint: #F6EDE6;       /* 闪屏 / 面板浅底 */
  --brand-font: var(--font-ui);/* 品牌字体（默认 = UI 字体，可覆盖） */
  --brand-dur: 900ms;          /* 闪屏退场时长 */
}

/* ── 工作室标记 lockup：glyph + name ──
 * 默认 glyph 是占位圆点；各游戏替换为自己的 SVG（inline <svg> 或 background）。
 * name 文本由各游戏填充（skill 不绑定具体工作室名）。 */
.studio-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brand-font);
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;
  color: inherit;            /* 浅主题用深墨字、深主题加 .studio-mark--light 用浅字 */
}
.studio-mark__glyph {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--brand);  /* 占位；inline <svg> 时此背景被 SVG 覆盖 */
  border-radius: 50%;
}
.studio-mark__name { font-size: 1em; }
.studio-mark--light { color: #fff; }
.studio-mark--sm { font-size: 14px; gap: 6px; }

/* ── 启动闪屏：每次加载先亮工作室标记 + 标语，再进游戏 ── */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--brand-tint);
  color: var(--brand);
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  opacity: 1;
  transition: opacity var(--brand-dur) var(--ease);
}
.splash.is-hidden { opacity: 0; pointer-events: none; }
.splash__mark { font-size: clamp(28px, 7vw, 44px); animation: splash-in 420ms var(--ease) both; }
.splash__tag {
  font-size: clamp(12px, 2.6vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.82;
  font-family: var(--brand-font);
}
@keyframes splash-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── 更多 [工作室] 游戏互推面板 ── */
.more-games { padding: var(--sp-4); }
.more-games__head {
  font-family: var(--brand-font);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 var(--sp-3);
}
.more-games__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.more-games__item {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.more-games__item:hover { transform: translateY(-2px); box-shadow: var(--sh-float); }
.more-games__thumb {
  aspect-ratio: 16 / 10;
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.more-games__meta { padding: var(--sp-2) var(--sp-3); }
.more-games__title { font-weight: 700; }
.more-games__tag { font-size: 12px; color: var(--muted); }

/* ── 无障碍：尊重 reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .splash { transition: none; }
  .splash__mark { animation: none; }
  .more-games__item { transition: none; }
  .more-games__item:hover { transform: none; }
}