/* PACKWOOD 品牌层 —— 覆盖镜像来的 Tailwind
 * ==========================================
 *
 * 镜像站是 bonkuji.com 的原版字节, 主题色是硬编码的十六进制、没有 CSS 变量,
 * 而且类名是 Tailwind 生成的。所以这里的打法有两条:
 *
 *   ① 颜色已经在服务层被换成 PACKWOOD 的了(见 serve.js 的 rewriteBrand) ——
 *      类名和 CSS 规则两边同时换, 所以 Tailwind 自己是自洽的。
 *   ② 剩下的"质感"在这里补: 字体、切角、辉光、地面色。
 *
 * 命中 Tailwind 任意值用【属性选择器】—— [class*="bg-[#1f9d55]"] 不需要知道
 * 它最后生成什么类名, 只要颜色对得上就行。
 */

/* ---------------------------------------------------------------- 字体 */

/* 分工(照 aeonpad 那套):
     Big Shoulders Display  超重压缩体 —— 字标 + 大标题
     Chakra Petch           方切技术体 —— 标签/按钮/导航
     Manrope                轻几何无衬线 —— 正文
     JetBrains Mono         等宽 —— 所有数字读数
   镜像原本是 Poppins + Roboto + Space Mono, 全部压掉。 */

:root {
  --pw-display: 'Big Shoulders Display', 'Arial Narrow', system-ui, sans-serif;
  --pw-tech:    'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --pw-body:    'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pw-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --pw-ground:  #0a0f0d;   /* 近黑偏绿, 不用纯黑 */
  --pw-surface: #121a16;
  --pw-primary: #1f9d55;
  --pw-gold:    #d4af37;
  --pw-ink:     #e8efe9;
  --pw-dim:     #7a8c80;
}

/* 正文换成 Manrope。镜像把字体挂在 __className_* 的包裹层上, 连 html 一起压。 */
html, body,
body *:not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--pw-body);
}

/* 标题给压缩体 —— 这是「高级感」最大的单一杠杆 */
h1, h2, h3, h4,
[class*="text-4xl"], [class*="text-5xl"], [class*="text-3xl"], [class*="text-2xl"],
[class*="text-[40px]"], [class*="text-[32px]"], [class*="text-[28px]"] {
  font-family: var(--pw-display);
  font-weight: 900;
  letter-spacing: .005em;
  text-transform: uppercase;
}

/* 小标签/导航/按钮走方切技术体 + 拉开字距 */
button, [role="button"], nav a, nav button,
[class*="uppercase"], [class*="tracking-"] {
  font-family: var(--pw-tech);
  letter-spacing: .06em;
}

/* 数字读数走等宽 —— 价格/倍数/库存/概率 */
[class*="font-mono"], code, pre, kbd, samp,
[class*="tabular-nums"] {
  font-family: var(--pw-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 地面 */

html, body { background-color: var(--pw-ground) !important; }

/* 深色区块统一压到品牌地面色(镜像里散着好几个紫调深色) */
[class*="bg-[#0a0f0d]"], [class*="bg-[#070b09]"], [class*="bg-black"] {
  background-color: var(--pw-ground) !important;
}

/* ---------------------------------------------------------------- 切角
   圆角读起来像 dashboard, 切角读起来像工程件。只切主行动按钮,
   卡片保留圆角(切太多会显得廉价)。 */

button[class*="bg-[#1f9d55]"],
button[class*="bg-[#26b866]"],
a[class*="bg-[#1f9d55]"],
[class*="bg-[#1f9d55]"][class*="rounded"] {
  --pw-notch: 10px;
  clip-path: polygon(
    var(--pw-notch) 0, 100% 0, 100% calc(100% - var(--pw-notch)),
    calc(100% - var(--pw-notch)) 100%, 0 100%, 0 var(--pw-notch)
  ) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 24px -6px rgba(31, 157, 85, .55);
}

/* 主按钮的文字用压缩体, 字重拉满 */
button[class*="bg-[#1f9d55]"] {
  font-family: var(--pw-display) !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

/* ---------------------------------------------------------------- 辉光
   表面是「被点亮」不是「被描边」 */

[class*="border-[#1f9d55]"] {
  box-shadow: 0 0 30px -14px rgba(31, 157, 85, .7), inset 0 0 24px -18px rgba(31, 157, 85, .5);
}

/* 卡片: 悬停时点亮 + 微微抬起 */
[class*="rounded"][class*="bg-[#121a16]"],
[class*="rounded"][class*="bg-[#0a0f0d]"] {
  transition: transform .18s ease, box-shadow .18s ease;
}
[class*="rounded"][class*="bg-[#121a16]"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px -12px rgba(31, 157, 85, .45);
}

/* 金色点缀: 稀有度/徽章/角标 */
[class*="text-[#d4af37]"], [class*="border-[#d4af37]"] {
  text-shadow: 0 0 14px rgba(212, 175, 55, .45);
}

/* ---------------------------------------------------------------- 主视觉
   首页那台 3D 抽卡机【已经重做过了】—— 用方舟图生图把橙色换成森林绿,
   霓虹招牌的字也从原品牌名换成了 PACKWOOD, 视频同样重新生成。
   素材本身对了, 所以这里【不能再加色相旋转】—— 再加一次会把绿转成紫,
   画面周围会出现一圈紫黑色(踩过)。

   剩下的只处理那些还没重做的橙色横幅图。 */

img[src*="banner_hero"],
img[src*="coin_banner"],
img[src*="newbnr"],
img[src*="bg_hero"],
img[src*="bg_profile_card"] {
  filter: hue-rotate(118deg) saturate(.75) brightness(.92) contrast(1.04);
}

/* 重做过的素材不能再过滤 —— 这里显式清掉, 免得以后有人手滑加回来 */
img[src*="gacha-machine-poster"],
video[class*="gacha_media"] {
  filter: none;
}


/* ---------------------------------------------------------------- 字标
   镜像原本的 logo 是一张 webp, 服务层已经把 bonkuji_logo_2026 指到
   public/img/packwood_logo_2026.webp —— 那是用 Big Shoulders Display 900
   渲染出来的真图(见 scripts/make-logo.js)。
   所以这里【不需要】再拿 CSS 往别人的 DOM 里塞文字 —— 试过, 会命中多个
   a[href="/"](页头的 GACHA 导航也是 href="/"), 字标会渲染两遍。

   只做一件事: 给字标一点辉光, 让它从深底上"浮"起来。 */
img[src*="packwood_logo_2026"] {
  filter: drop-shadow(0 0 18px rgba(31, 157, 85, .45));
}

/* ---------------------------------------------------------------- 细节 */

::selection { background: rgba(31, 157, 85, .35); color: var(--pw-ink); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pw-ground); }
::-webkit-scrollbar-thumb { background: #1e2b24; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--pw-primary); }