/* Dicestiny 开发日志 —— 视觉语言与游戏同源:近黑石绿底、做旧鎏金发丝框、✦ 分隔、宋体标题。
   签名件:前后对比拉杆(金色分割线+菱形把手)。 */

:root {
  --ink: #0b0e0a;        /* 近黑石绿底 */
  --panel: #14170f;      /* 面板 */
  --gold: #c9a227;       /* 做旧鎏金 */
  --gold-hi: #e7c14e;    /* 亮金 */
  --parch: #e8dfc8;      /* 羊皮纸象牙白 */
  --muted: #8a8570;      /* 退后的说明字 */
  --font-display: "Palatino", "Songti SC", "STSong", "Noto Serif SC", serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--parch);
  font-family: var(--font-body);
  line-height: 1.75;
}

a { color: var(--gold-hi); text-decoration-color: rgba(201, 162, 39, .45); text-underline-offset: 3px; }
a:hover { color: #f4d97a; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 2px; }

/* ── 首屏:活着的战场 ─────────────────────────────── */
.hero {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(201, 162, 39, .35);
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.02);
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, transparent 30%, rgba(11, 14, 10, .82) 100%),
    linear-gradient(to bottom, rgba(11, 14, 10, .35), rgba(11, 14, 10, .15) 40%, rgba(11, 14, 10, .9) 96%);
}
.hero-inner {
  position: relative;
  text-align: center;
  padding: 9rem 1.5rem 4.5rem;
  max-width: 46rem;
}
.crest {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .8));
  margin-bottom: 1.1rem;
}
.title { font-family: var(--font-display); line-height: 1.12; }
.title-en {
  display: block;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  letter-spacing: .34em;
  margin-left: .34em; /* 补偿字距,视觉居中 */
  color: var(--gold-hi);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
  font-weight: 600;
}
.title-cn {
  display: block;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  letter-spacing: .62em;
  margin-left: .62em;
  color: var(--parch);
  margin-top: .55rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
.tagline {
  margin-top: 1.15rem;
  color: rgba(232, 223, 200, .88);
  font-size: clamp(.92rem, 2vw, 1.02rem);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.status { margin-top: 1.4rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--parch);
  border: 1px solid rgba(201, 162, 39, .5);
  background: rgba(11, 14, 10, .55);
  padding: .3rem .7rem;
  border-radius: 2px;
  backdrop-filter: blur(2px);
}
.chip-live { color: #a8d08a; border-color: rgba(140, 180, 110, .5); }

/* ── 日志区 ───────────────────────────────────────── */
main { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }

.devlog { padding: 4.2rem 0 2rem; }
.section-head {
  display: flex; align-items: center; gap: 1rem;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .3em;
  margin-left: .3em;
  color: var(--gold);
  font-weight: 600;
}
.section-head .rule {
  flex: 1; max-width: 9rem; height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, rgba(201, 162, 39, .55));
}
.section-head .rule:last-child { --dir: left; }
.section-sub {
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
  margin: .8rem auto 3rem;
  max-width: 34rem;
}

.log { list-style: none; display: grid; gap: 3.2rem; }

/* 条目卡:细金发丝框+对角卷花(游戏 UI 合同的白名单词汇) */
.entry {
  position: relative;
  background: linear-gradient(168deg, #14170f 0%, #101308 60%, #0d1008 100%);
  border: 1px solid rgba(201, 162, 39, .34);
  padding: 1.7rem 1.9rem 1.5rem;
}
.entry::before, .entry::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border-color: rgba(231, 193, 78, .75);
  border-style: solid;
}
.entry::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.entry::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.entry-date {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--gold);
}
.entry-title {
  font-family: var(--font-display);
  font-size: 1.42rem;
  color: var(--parch);
  margin: .35rem 0 .5rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.entry-text { color: rgba(232, 223, 200, .82); font-size: .96rem; max-width: 46rem; }

.entry-media { margin-top: 1.25rem; }
.entry-media img, .compare { border: 1px solid rgba(201, 162, 39, .28); }
.entry-media > img { display: block; width: 100%; height: auto; }

/* 标签:本次加入 */
.entry-tags { margin-top: 1.05rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.entry-tags .lead { color: var(--muted); font-size: .78rem; letter-spacing: .1em; margin-right: .15rem; }
.tag {
  font-size: .76rem;
  color: rgba(232, 223, 200, .85);
  border: 1px solid rgba(201, 162, 39, .3);
  background: rgba(201, 162, 39, .07);
  padding: .12rem .55rem;
  border-radius: 2px;
}

/* ── 签名件:前后对比拉杆 ──────────────────────────── */
.compare {
  position: relative;
  aspect-ratio: 1376 / 768;
  overflow: hidden;
  user-select: none;
  --pos: 50%;
}
.compare img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.compare .after { clip-path: inset(0 0 0 var(--pos)); }
.compare .divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 1px;
  background: var(--gold-hi);
  box-shadow: 0 0 10px rgba(231, 193, 78, .7);
  pointer-events: none;
}
.compare .divider::after {
  content: "◆";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) ;
  color: var(--gold-hi);
  font-size: 1.05rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, .9), 0 0 4px rgba(0, 0, 0, .9);
}
.compare .lab {
  position: absolute; top: .55rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  padding: .18rem .5rem;
  background: rgba(11, 14, 10, .68);
  border: 1px solid rgba(201, 162, 39, .4);
  color: var(--parch);
  pointer-events: none;
}
.compare .lab-b { left: .55rem; }
.compare .lab-a { right: .55rem; }
.compare input[type="range"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.compare input[type="range"]:focus-visible ~ .divider {
  box-shadow: 0 0 0 2px var(--gold-hi), 0 0 12px rgba(231, 193, 78, .8);
}

/* ── 页脚 ─────────────────────────────────────────── */
.foot {
  margin-top: 4rem;
  padding: 2.2rem 1.5rem 2.6rem;
  text-align: center;
  border-top: 1px solid rgba(201, 162, 39, .25);
  font-size: .88rem;
  color: var(--muted);
}
.foot-dim { margin-top: .35rem; font-size: .78rem; color: rgba(138, 133, 112, .6); }

@media (max-width: 640px) {
  .hero { min-height: 64vh; }
  .hero-inner { padding-top: 6rem; }
  .entry { padding: 1.2rem 1.05rem 1.15rem; }
  .entry-title { font-size: 1.22rem; }
}