/* Cyberpunk 2020 library skin — the 1990 sourcebook: black page, white condensed type,
   the cover's red brush logo, grey "VIEW FROM THE EDGE" tab bars, photocopied halftone.
   Structure: lib_skin.css. Body class: .lk-cp2020. */

.lk-cp2020 {
  --lk-bg: #0b0b0c;
  --lk-panel-a: #171719;
  --lk-panel-b: #0f0f10;
  --lk-line: rgba(226, 226, 220, 0.16);
  --lk-line-strong: rgba(226, 226, 220, 0.4);
  --lk-accent: #e8261c;
  --lk-accent-2: #d8d8d0;
  --lk-ink: #0b0b0c;
  --lk-title: #f4f2ec;
  --lk-text: #dcd9d2;
  --lk-dim: #9b978f;
  --lk-steel: #8fb3c9;
  --lk-head: "Oswald", "Bahnschrift SemiBold Condensed", "Arial Narrow", Impact, sans-serif;
  --lk-mono: "Share Tech Mono", "Consolas", monospace;
  --lk-radius: 0;
  --lk-halftone: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.6px) 0 0 / 6px 6px;
  --lk-page-bg:
    radial-gradient(900px 500px at 100% -10%, rgba(232, 38, 28, 0.12), transparent 60%),
    linear-gradient(180deg, #0e0e10, #0a0a0b);
  --lk-table-bg: rgba(16, 16, 17, 0.94);
  --tbl-line: rgba(226, 226, 220, 0.12);
  --tbl-line-strong: rgba(226, 226, 220, 0.3);
  --tbl-head: #d8d8d0;
  --tbl-stripe: rgba(255, 255, 255, 0.025);
  --tbl-hover: rgba(232, 38, 28, 0.07);
  --tbl-group: rgba(232, 38, 28, 0.12);
  --link: #ff6a5e;
}

/* Sidebar: black spine, grey tab titles */
.lk-cp2020 .sidebar { background: #0c0c0d; border-right: 1px solid #2a2a2c; }
.lk-cp2020 .sidebar .nav-group-title {
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lk-ink);
  background: var(--lk-accent-2);
  padding: 3px 8px;
}
.lk-cp2020 .sidebar .nav-group-title::before { content: none; }
.lk-cp2020 .sidebar .nav-link:hover,
.lk-cp2020 .sidebar .nav-link.active { color: #fff; background: rgba(232, 38, 28, 0.14); box-shadow: inset 3px 0 0 var(--lk-accent); }

/* Hero: the book's black page with a grey edge bar */
.lk-cp2020 .lk-hero {
  border: 0;
  border-top: 10px solid var(--lk-accent-2);
  background:
    var(--lk-halftone),
    linear-gradient(100deg, #0c0c0d 40%, rgba(12, 12, 13, 0.7)),
    #101011;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}
.lk-cp2020 .lk-hero::before {
  content: "VIEW FROM THE EDGE";
  position: absolute;
  top: -10px;
  right: 18px;
  padding: 0 8px;
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 10px;
  letter-spacing: 0.22em;
  color: var(--lk-ink);
}
.lk-cp2020 .lk-deco-a {
  /* red brush underline like the cover logo */
  left: -30px;
  bottom: 18%;
  width: 62%;
  height: 22px;
  background: linear-gradient(90deg, transparent, rgba(232, 38, 28, 0.85) 6%, rgba(190, 20, 14, 0.7) 75%, transparent);
  transform: rotate(-2deg) skewX(-24deg);
  opacity: 0.38;
}
.lk-cp2020 .lk-deco-b { left: 0; right: 0; bottom: 0; height: 3px; background: var(--lk-accent); opacity: 0.85; }
.lk-cp2020 .lk-watermark {
  right: 230px;
  top: -6px;
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: 7.5rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
}
.lk-cp2020 .lk-kicker { color: var(--lk-accent-2); font-family: var(--lk-mono); font-size: 0.85rem; letter-spacing: 0.18em; }
.lk-cp2020 .lk-cursor { width: 10px; height: 14px; background: var(--lk-accent); }
.lk-cp2020 .lk-title {
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 4rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lk-cp2020 .lk-title .lk-accent {
  color: var(--lk-accent);
  font-style: italic;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.lk-cp2020 .lk-tags li {
  padding: 4px 12px;
  background: #151517;
  border: 1px solid #333;
  border-left: 4px solid var(--lk-accent);
  font-family: var(--lk-head);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lk-cp2020 .lk-tags strong { color: #fff; font-weight: 700; }

/* Poster: a photocopied role plate */
.lk-cp2020 .lk-poster {
  width: 200px;
  padding: 8px 8px 10px;
  background: #e9e7e0;
  color: #111;
  transform: rotate(1.5deg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}
.lk-cp2020 .lk-poster::before {
  content: "SOUL & THE NEW MACHINE";
  display: block;
  margin: 0 0 6px;
  padding: 2px 4px;
  background: #111;
  color: #e9e7e0;
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-align: center;
}
.lk-cp2020 .lk-poster-frame { border: 1px solid #111; background: #fff; }
.lk-cp2020 .lk-poster img { height: 230px; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.15); }
.lk-cp2020 .lk-poster figcaption { margin-top: 6px; text-align: center; }
.lk-cp2020 .lk-poster-cap { font-family: var(--lk-head); font-weight: 700; font-size: 1.15rem; line-height: 1; text-transform: uppercase; }
.lk-cp2020 .lk-poster-sub { color: #b0150e; opacity: 1; font-family: var(--lk-mono); font-size: 0.72rem; }

/* Chapter banners: grey tab with a black number */
.lk-cp2020 .lk-chapter { background: linear-gradient(90deg, #19191b, #0f0f10 70%, transparent); border-top: 1px solid var(--lk-line); }
.lk-cp2020 .lk-chapter-num {
  min-width: 84px;
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: 2rem;
  color: var(--lk-ink);
  background: var(--lk-accent-2);
}
.lk-cp2020 .lk-chapter-name { font-family: var(--lk-head); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.06em; text-transform: uppercase; }
.lk-cp2020 .lk-chapter-mark { font-family: var(--lk-mono); color: var(--lk-accent); letter-spacing: 0.1em; }

/* Sections */
.lk-cp2020 .section > h2,
.lk-cp2020 h2.section-title {
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: 1.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--lk-accent) 0 56px, rgba(226, 226, 220, 0.25) 56px, transparent) 1;
}
.lk-cp2020 .section h3 { font-family: var(--lk-head); font-weight: 600; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lk-steel); }
.lk-cp2020 .section ul > li::marker,
.lk-cp2020 .section ol > li::marker { color: var(--lk-accent); }
.lk-cp2020 .cp-src { margin-top: -6px; font-family: var(--lk-mono); font-size: 0.78rem; }
.lk-cp2020 .cp-caption { margin: 10px 0 4px; color: var(--lk-dim); font-size: 0.9rem; }
.lk-cp2020 .cp-note { border-left-color: var(--lk-accent); background: linear-gradient(90deg, rgba(232, 38, 28, 0.09), transparent); }
.lk-cp2020 .cp-kv { list-style: none; padding: 0; margin: 8px 0 12px; }
.lk-cp2020 .cp-kv li { padding: 5px 0; border-bottom: 1px dashed var(--lk-line); }
.lk-cp2020 .cp-kv li strong { display: inline-block; min-width: 9em; color: #fff; font-family: var(--lk-head); font-weight: 600; letter-spacing: 0.03em; }

/* Cards */
.lk-cp2020 .card { border: 1px solid #2b2b2e; border-top: 3px solid var(--lk-accent); background: linear-gradient(170deg, var(--lk-panel-a), var(--lk-panel-b)); }
.lk-cp2020 .card:hover { border-color: #444; border-top-color: var(--lk-accent); }
.lk-cp2020 .card-title { font-family: var(--lk-head); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lk-title); }
.lk-cp2020 .badge { background: var(--lk-accent); color: #fff; border: 0; }
.lk-cp2020 .rule-key { border-left-color: var(--lk-accent); }

/* Tables: grey header bars, mono numbers */
.lk-cp2020 table.data-table thead th {
  font-family: var(--lk-head);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lk-ink);
  background: var(--tbl-head);
}
.lk-cp2020 table.data-table td.num,
.lk-cp2020 td.rt-roll,
.lk-cp2020 .cp-gear td.num { font-family: var(--lk-mono); color: #fff; }
.lk-cp2020 tr.tbl-group td { font-family: var(--lk-head); font-weight: 700; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lk-accent); }

/* Equipment */
.lk-cp2020 .cp-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.lk-cp2020 .cp-gear tr.cp-sub td { color: var(--lk-dim); }
.lk-cp2020 .cp-gear tr.cp-sub td.cell-name { padding-left: 18px; font-style: italic; }
.lk-cp2020 .cp-gear td { white-space: normal; }
.lk-cp2020 .cp-gear td.cell-name { font-weight: 600; color: var(--lk-title); }

/* Chips & buttons */
.lk-cp2020 .filter-chip { font-family: var(--lk-head); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; }
.lk-cp2020 .filter-chip.active { background: var(--lk-accent); border-color: var(--lk-accent); color: #fff; }
.lk-cp2020 .btn-primary { background: var(--lk-accent); border-color: var(--lk-accent); color: #fff; }
.lk-cp2020 .btn-primary:hover { background: #ff3f34; }

/* Threats */
.lk-cp2020 #adv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.lk-cp2020 .cp-statline { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 8px; font-family: var(--lk-mono); font-size: 0.86rem; }
.lk-cp2020 .cp-statline span { white-space: nowrap; }
.lk-cp2020 .cp-statline b { color: var(--lk-accent-2); font-weight: 400; margin-right: 3px; }

/* Roll boards */
.lk-cp2020 .rt-section { border: 1px solid #2b2b2e; border-left: 4px solid var(--lk-accent); }
.lk-cp2020 .rt-die-chip { background: var(--lk-accent-2); color: var(--lk-ink); }
.lk-cp2020 .rt-result { border-color: var(--lk-accent); color: #fff; }

/* Quick strip */
.lk-cp2020 .lk-quick-card { border: 1px solid #2b2b2e; border-top: 6px solid var(--lk-accent-2); }
.lk-cp2020 .lk-quick-card h3 { font-family: var(--lk-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lk-title); }
.lk-cp2020 .lk-ladder strong { background: var(--lk-accent); color: #fff; font-family: var(--lk-mono); }
.lk-cp2020 .lk-formula { font-family: var(--lk-mono); font-size: 1.15rem; }
.lk-cp2020 .lk-formula em { color: var(--lk-accent); font-style: normal; }
.lk-cp2020 .lk-steps li::before { background: var(--lk-accent); color: #fff; }
.lk-cp2020 .lk-kv li strong { color: #fff; font-family: var(--lk-mono); font-weight: 400; }

/* Motion (Full only): a photocopier flicker on the kicker cursor */
html[data-motion="full"] .lk-cp2020 .lk-cursor { animation: lk-cp20-blink 1.1s steps(1) infinite; }
@keyframes lk-cp20-blink { 50% { opacity: 0; } }

@media (max-width: 720px) {
  .lk-cp2020 .lk-watermark { right: -10px; font-size: 4.5rem; }
  .lk-cp2020 .lk-chapter-num { min-width: 60px; font-size: 1.5rem; }
  .lk-cp2020 .lk-chapter-name { font-size: 1.1rem; }
  .lk-cp2020 .cp-kv li strong { display: block; min-width: 0; }
}