/* ============================================================
   OG2GO · 悬案 // VISUAL IDENTITY SYSTEM  v1.0  (2026-06-08)
   noir 探案 × NYC street hip-hop × RPG underground
   单一真源：所有 og2go 页面 import 本文件，组件统一用 .og- 前缀
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* asphalt / concrete (深底) */
  --og-asphalt:   #0a0a0c;
  --og-asphalt-2: #121216;
  --og-concrete:  #1c1d22;
  --og-concrete-2:#15161b;
  --og-line:      #2a2c34;
  --og-line-soft: #3a3c44;

  /* bone / 卷宗纸 (浅底) */
  --og-bone:     #ece5d4;
  --og-bone-dim: #cbc3b0;
  --og-paper:    #ece5d4;
  --og-paper-ln: #c3b896;
  --og-ink:      #0a0a0c;

  /* signal colors */
  --og-gold:      #f4c542;   --og-gold-deep:#b88a18;
  --og-blood:     #e2342f;   --og-blood-deep:#9e1b18;
  --og-cyan:      #2de2e6;
  --og-magenta:   #ff2e97;
  --og-cold:      #4aa8ff;   /* PvE 探案 */
  --og-heat:      #e2342f;   /* PvP 擂台 */

  /* type */
  --og-font-display:"Impact","Haettenschweiler","Arial Narrow Bold","Oswald","PingFang SC",sans-serif;
  --og-font-mono:ui-monospace,"SFMono-Regular",Menlo,"Courier New",monospace;
  --og-font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  /* geometry */
  --og-radius:12px; --og-radius-sm:6px; --og-radius-lg:16px;
  --og-gap:20px;

  /* shadows / treatments */
  --og-shadow-hard:4px 4px 0 #000;
  --og-shadow-blood:5px 5px 0 var(--og-blood-deep);
  --og-shadow-drop:0 30px 60px rgba(0,0,0,.5);
  --og-glow-gold:0 0 26px rgba(244,197,66,.45);
  --og-glow-cyan:0 0 26px rgba(45,226,230,.40);

  /* warning tape (警戒胶带) */
  --og-tape-gold: repeating-linear-gradient(45deg,var(--og-gold) 0 18px,#1a1a1a 18px 36px);
  --og-tape-blood:repeating-linear-gradient(45deg,var(--og-blood) 0 18px,#1a1a1a 18px 36px);

  /* film grain (data-uri，零依赖) */
  --og-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- 2. BASE ---------- */
.og-body{
  margin:0; background:var(--og-asphalt); color:var(--og-bone);
  font-family:var(--og-font-body); -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
}
/* 全局颗粒噪点叠层：给任意容器加 .og-grain */
.og-grain::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.05; background-image:var(--og-grain);
}
/* 氛围深底：街道光斑 + 斜纹 */
.og-atmos{
  background:
    radial-gradient(900px 500px at 85% 0%,rgba(255,46,151,.10),transparent 60%),
    radial-gradient(800px 500px at 5% 95%,rgba(45,226,230,.08),transparent 60%),
    repeating-linear-gradient(115deg,transparent 0 38px,rgba(255,255,255,.012) 38px 39px),
    var(--og-asphalt);
}
.og-wrap{max-width:1080px; margin:0 auto; padding:0 26px}

/* ---------- 3. TYPOGRAPHY ---------- */
.og-display{
  font-family:var(--og-font-display); text-transform:uppercase; font-weight:900;
  line-height:.86; letter-spacing:.01em; color:var(--og-bone);
  text-shadow:var(--og-shadow-hard), var(--og-shadow-blood);
}
.og-display .go{color:var(--og-gold); -webkit-text-stroke:2px #000}
.og-h2{font-family:var(--og-font-display); text-transform:uppercase; font-weight:900;
  font-size:clamp(30px,6vw,58px); line-height:.98; color:var(--og-bone); text-shadow:3px 3px 0 #000}
.og-h2 em{font-style:normal; color:var(--og-gold)}
.og-mono{font-family:var(--og-font-mono)}
.og-eyebrow{font-family:var(--og-font-mono); font-size:12px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--og-blood)}
.og-eyebrow.is-gold{color:var(--og-gold)}
.og-lead{max-width:62ch; color:var(--og-bone-dim); font-size:17px; line-height:1.75}
.og-lead b{color:var(--og-bone)}

/* ---------- 4. WARNING TAPE 警戒胶带 ---------- */
.og-tape{
  background:var(--og-tape-gold); padding:9px 0; width:140%;
  box-shadow:0 4px 20px rgba(0,0,0,.4); transform:rotate(-4deg);
}
.og-tape > span{display:block; text-align:center; color:var(--og-ink);
  letter-spacing:.5em; font-size:13px; font-family:var(--og-font-mono); font-weight:700}
.og-tape.is-blood{background:var(--og-tape-blood); transform:rotate(3deg)}
.og-tape.is-blood > span{color:var(--og-bone)}

/* ---------- 5. STAMP 印章 ---------- */
.og-stamp{
  display:inline-block; font-family:var(--og-font-display); text-transform:uppercase;
  border:5px solid var(--og-blood); color:var(--og-blood); padding:8px 18px 4px;
  border-radius:8px; transform:rotate(-9deg); opacity:.92;
  text-shadow:2px 2px 0 rgba(226,52,47,.25); box-shadow:inset 0 0 0 2px rgba(226,52,47,.3);
  line-height:1;
}
.og-stamp small{display:block; font-size:.2em; letter-spacing:.5em; text-align:center; margin-top:6px}
.og-stamp.is-gold{border-color:var(--og-gold); color:var(--og-gold);
  text-shadow:2px 2px 0 rgba(244,197,66,.25); box-shadow:inset 0 0 0 2px rgba(244,197,66,.3)}

/* ---------- 6. DOSSIER 卷宗卡 ---------- */
.og-dossier{
  background:var(--og-paper); color:var(--og-ink); border-radius:8px; overflow:hidden;
  box-shadow:var(--og-shadow-drop); position:relative; transform:rotate(-.4deg);
}
.og-dossier::before{
  content:"CONFIDENTIAL // 卷宗"; position:absolute; top:10px; right:16px;
  font:700 11px var(--og-font-mono); letter-spacing:.2em; color:var(--og-blood);
  border:2px solid var(--og-blood); padding:3px 8px; transform:rotate(6deg); opacity:.7;
}
.og-dossier h3{font:800 13px var(--og-font-mono); letter-spacing:.2em; padding:18px 22px 0; color:#6a4a14}

/* dossier 内表格 */
.og-table{border-collapse:collapse; width:100%; font-size:14.5px; margin-top:8px}
.og-table th,.og-table td{text-align:left; padding:12px 22px; border-bottom:1px dashed var(--og-paper-ln); vertical-align:top}
.og-table thead th{font:700 11px var(--og-font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:#8a7036; border-bottom:2px solid #b3a578}
.og-table tbody tr:nth-child(even){background:rgba(0,0,0,.035)}
.og-table td b{color:#1a1a1a}
.og-table .slang{color:var(--og-blood-deep); font-weight:700}
.og-table .slang .x{color:var(--og-ink); background:var(--og-gold); padding:0 6px; border-radius:3px}

/* ---------- 7. CALLOUT 金句框 ---------- */
.og-callout{
  border:1px solid var(--og-line); border-left:5px solid var(--og-gold); border-radius:var(--og-radius);
  background:linear-gradient(100deg,rgba(244,197,66,.07),transparent); padding:26px 28px;
}
.og-callout .xp{font-family:var(--og-font-display); text-transform:uppercase; font-size:clamp(22px,4vw,34px)}
.og-callout .xp b{color:var(--og-gold)}
.og-callout p{margin-top:10px; color:var(--og-bone-dim)}

/* ---------- 8. LADDER 升级阶梯 ---------- */
.og-ladder{display:flex; align-items:flex-end; gap:6px; overflow-x:auto; padding-bottom:8px}
.og-rung{flex:1; min-width:108px; text-align:center; border-top:3px solid var(--og-line); padding-top:14px; position:relative}
.og-rung .lv{font:700 11px var(--og-font-mono); color:#5a5d67; letter-spacing:.1em}
.og-rung .nm{margin-top:6px; font-family:var(--og-font-display); text-transform:uppercase; font-size:18px; color:var(--og-bone-dim)}
.og-rung .zh{display:block; font-family:var(--og-font-body); font-size:12px; color:#787b85; margin-top:2px}
.og-rung.is-mid{border-color:var(--og-cyan)} .og-rung.is-mid .nm{color:var(--og-cyan)}
.og-rung.is-king{border-color:var(--og-gold)}
.og-rung.is-king .nm{color:var(--og-gold); font-size:24px; text-shadow:var(--og-glow-gold)}
.og-rung.is-king::before{content:"👑"; position:absolute; top:-34px; left:50%; transform:translateX(-50%); font-size:24px}
.og-rung.is-ship{border-color:var(--og-blood)} .og-rung.is-ship .nm{color:var(--og-blood)}

/* ---------- 9. DOORS 双门 (PvE/PvP) ---------- */
.og-doors{display:grid; grid-template-columns:1fr 1fr; gap:20px; position:relative}
.og-door{border:1px solid var(--og-line); border-radius:var(--og-radius-lg); padding:34px 28px;
  position:relative; overflow:hidden; min-height:240px; transition:transform .2s, box-shadow .2s}
.og-door:hover{transform:translateY(-6px)}
.og-door.is-cold{background:radial-gradient(500px 300px at 30% 0%,rgba(74,168,255,.16),transparent 60%),#0c1118; border-color:#1d3550}
.og-door.is-cold:hover{box-shadow:0 24px 50px rgba(74,168,255,.18)}
.og-door.is-hot{background:radial-gradient(500px 300px at 70% 0%,rgba(226,52,47,.18),transparent 60%),#160c0c; border-color:#4a1d1d}
.og-door.is-hot:hover{box-shadow:0 24px 50px rgba(226,52,47,.2)}
.og-door .pin{font:800 12px var(--og-font-mono); letter-spacing:.2em}
.og-door.is-cold .pin{color:var(--og-cold)} .og-door.is-hot .pin{color:var(--og-blood)}
.og-door h3{font-family:var(--og-font-display); text-transform:uppercase; font-size:clamp(28px,5vw,40px); margin:10px 0 6px; line-height:1}
.og-door.is-cold h3{color:#bfe0ff} .og-door.is-hot h3{color:#ffc9c6}
.og-door p{color:var(--og-bone-dim); font-size:15px; line-height:1.7}
.og-vs{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5;
  font-family:var(--og-font-display); font-size:clamp(40px,8vw,72px); color:var(--og-gold);
  text-shadow:var(--og-glow-gold),4px 4px 0 #000; pointer-events:none}
@media(max-width:760px){.og-doors{grid-template-columns:1fr}}

/* ---------- 10. BUTTONS 街头按钮 ---------- */
.og-btn{
  display:inline-block; font-family:var(--og-font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:18px; color:var(--og-ink); background:var(--og-gold); border:none; cursor:pointer;
  padding:13px 26px 11px; border-radius:var(--og-radius-sm); box-shadow:var(--og-shadow-hard);
  transition:transform .12s, box-shadow .12s; text-decoration:none;
}
.og-btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000}
.og-btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 #000}
.og-btn.is-blood{background:var(--og-blood); color:var(--og-bone)}
.og-btn.is-ghost{background:transparent; color:var(--og-bone); border:2px solid var(--og-line); box-shadow:none}
.og-btn.is-ghost:hover{border-color:var(--og-gold); color:var(--og-gold); transform:translateY(-2px)}

/* ---------- 11. RANK CHIP 名号徽章 ---------- */
.og-chip{display:inline-block; font:700 12px var(--og-font-mono); letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; border:2px solid var(--og-line-soft); color:var(--og-bone-dim)}
.og-chip.is-npc{border-color:#33353d; color:#6b6e78}
.og-chip.is-og{border-color:var(--og-gold); color:var(--og-gold); box-shadow:var(--og-glow-gold)}
.og-chip.is-go{border-color:var(--og-blood); color:var(--og-blood)}

/* ---------- 12. TAGLINE 标语 ---------- */
.og-tag{font-family:var(--og-font-display); text-transform:uppercase; font-size:clamp(22px,5vw,40px);
  color:var(--og-bone); transform:skewX(-6deg); border-left:5px solid var(--og-blood); padding-left:18px;
  text-shadow:3px 3px 0 #000}
.og-tag.is-gold{border-color:var(--og-gold); color:var(--og-gold)}
.og-tag .mut{color:#6b6e78}

/* ---------- 13. ENTRANCE 入场动画 ---------- */
@keyframes ogRise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.og-rise{animation:ogRise .7s cubic-bezier(.2,.7,.2,1) both}
.og-rise.d1{animation-delay:.08s} .og-rise.d2{animation-delay:.16s}
.og-rise.d3{animation-delay:.24s} .og-rise.d4{animation-delay:.32s}
@media(prefers-reduced-motion:reduce){.og-rise{animation:none}}