/* Cyberpunk Red library skin — "screamsheet": black streets, red brush, yellow taxi stripe, cyan neon.
   Structure: lib_skin.css. Body class: .lk-cpred. */

.lk-cpred {
  --lk-bg: #08080a;
  --lk-panel-a: #17141a;
  --lk-panel-b: #0d0b0e;
  --lk-line: rgba(232, 50, 43, 0.22);
  --lk-line-strong: rgba(232, 50, 43, 0.5);
  --lk-accent: #ff3b30;
  --lk-accent-2: #ffd23f;
  --lk-ink: #0a0a0c;
  --lk-title: #f5f1ea;
  --lk-text: #ddd6d0;
  --lk-dim: #9a8f8c;
  --lk-cyan: #4fe3f0;
  --lk-head: "Barlow Condensed", "Bahnschrift SemiBold Condensed", "Arial Narrow", Impact, sans-serif;
  --lk-brush: "Permanent Marker", "Segoe Print", cursive;
  --lk-radius: 2px;
  --lk-halftone: radial-gradient(circle at 1px 1px, rgba(255, 59, 48, 0.16) 1px, transparent 1.6px) 0 0 / 7px 7px;
  --lk-page-bg:
    radial-gradient(900px 520px at 100% -10%, rgba(255, 59, 48, 0.14), transparent 60%),
    radial-gradient(700px 520px at -10% 40%, rgba(79, 227, 240, 0.06), transparent 60%),
    #08080a;
  --lk-table-bg: rgba(14, 12, 15, 0.92);
  --tbl-line: rgba(232, 50, 43, 0.14);
  --tbl-line-strong: rgba(232, 50, 43, 0.36);
  --tbl-head: #1a0f10;
  --tbl-stripe: rgba(255, 255, 255, 0.025);
  --tbl-hover: rgba(79, 227, 240, 0.06);
  --tbl-group: rgba(255, 59, 48, 0.14);
  --link: #ff7a6e;
}

/* Sidebar: black spine with a red edge */
.lk-cpred .sidebar { background: linear-gradient(180deg, #110d0f, #070608); border-right: 2px solid #3a1214; }
.lk-cpred .sidebar .nav-group-title { font-family: var(--lk-head); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lk-title); }
.lk-cpred .sidebar .nav-group-title::before { color: var(--lk-accent); }
.lk-cpred .sidebar .nav-link:hover,
.lk-cpred .sidebar .nav-link.active { color: var(--lk-accent-2); background: rgba(255, 59, 48, 0.1); box-shadow: inset 3px 0 0 var(--lk-accent); }

/* Hero: night street with a red brush swipe */
.lk-cpred .lk-hero {
  border: 0;
  border-top: 4px solid var(--lk-accent);
  background:
    var(--lk-halftone),
    linear-gradient(100deg, rgba(8, 8, 10, 0.96) 35%, rgba(8, 8, 10, 0.65)),
    radial-gradient(60% 120% at 85% 50%, rgba(79, 227, 240, 0.18), transparent 70%),
    #0b0a0d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.lk-cpred .lk-deco-a {
  /* the red brush stroke behind the title */
  left: -40px;
  top: 52%;
  width: 72%;
  height: 74px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 59, 48, 0.85) 8%, rgba(214, 32, 26, 0.75) 70%, transparent),
    radial-gradient(circle at 20% 50%, rgba(0, 0, 0, 0.3) 0 2px, transparent 3px) 0 0 / 11px 9px;
  transform: rotate(-4deg) skewX(-18deg);
  filter: blur(0.4px);
  opacity: 0.32;
  mix-blend-mode: screen;
}
.lk-cpred .lk-deco-b {
  /* yellow taxi stripe on the bottom edge */
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--lk-accent-2) 0 26px, #0b0a0d 26px 34px);
  opacity: 0.85;
}
.lk-cpred .lk-watermark {
  right: 230px;
  top: -18px;
  font-family: var(--lk-head);
  font-weight: 800;
  font-size: 9rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 59, 48, 0.18);
  letter-spacing: -0.02em;
}
.lk-cpred .lk-kicker { color: var(--lk-cyan); font-family: var(--lk-head); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.28em; }
.lk-cpred .lk-cursor { width: 22px; height: 3px; background: var(--lk-accent); }
.lk-cpred .lk-title {
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 3px 3px 0 rgba(255, 59, 48, 0.35);
}
.lk-cpred .lk-title .lk-accent {
  display: inline-block;
  font-family: var(--lk-brush);
  font-weight: 400;
  text-transform: none;
  font-size: 1.05em;
  color: var(--lk-accent);
  transform: rotate(-4deg) translateY(-4px);
  text-shadow: 0 0 22px rgba(255, 59, 48, 0.35);
}
.lk-cpred .lk-tags li {
  padding: 4px 12px;
  background: #121014;
  border: 1px solid #3a2a2c;
  border-left: 3px solid var(--lk-accent-2);
  font-family: var(--lk-head);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lk-cpred .lk-tags strong { color: var(--lk-accent-2); font-weight: 800; }

/* Poster: torn screamsheet clipping */
.lk-cpred .lk-poster {
  width: 210px;
  padding: 10px 10px 12px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 4px),
    #ece5d3;
  color: #121012;
  transform: rotate(-2.5deg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.65);
  clip-path: polygon(0 3%, 6% 0, 14% 2%, 24% 0, 35% 2.5%, 47% 0, 58% 2%, 70% 0, 82% 2.2%, 93% 0, 100% 2%, 100% 97%, 92% 100%, 80% 97.5%, 66% 100%, 52% 97.5%, 38% 100%, 25% 97%, 12% 100%, 0 97.5%);
}
.lk-cpred .lk-poster::before {
  content: "SCREAMSHEET · NIGHT CITY";
  display: block;
  margin: 2px 0 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid #121012;
  font-family: var(--lk-head);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-align: center;
}
.lk-cpred .lk-poster-frame { border: 2px solid #121012; }
.lk-cpred .lk-poster-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.35) 0.8px, transparent 1.3px) 0 0 / 4px 4px;
  mix-blend-mode: multiply;
}
.lk-cpred .lk-poster img { height: 220px; filter: grayscale(0.85) contrast(1.25) brightness(1.05); }
.lk-cpred .lk-poster figcaption { margin-top: 6px; text-align: center; }
.lk-cpred .lk-poster-cap { font-family: var(--lk-head); font-weight: 800; font-size: 1.15rem; line-height: 1; text-transform: uppercase; }
.lk-cpred .lk-poster-sub { color: #b4221b; opacity: 1; }

/* Chapter banners: red slash */
.lk-cpred .lk-chapter { background: linear-gradient(90deg, #160d0e, #0d0b0d 70%, transparent); border-top: 1px solid var(--lk-line); }
.lk-cpred .lk-chapter-num {
  min-width: 92px;
  padding-right: 28px;
  font-weight: 800;
  font-size: 2.2rem;
  color: #fff;
  background: linear-gradient(100deg, #ff3b30, #b8170f);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.lk-cpred .lk-chapter-name { font-weight: 800; font-size: 1.6rem; letter-spacing: 0.08em; }
.lk-cpred .lk-chapter-mark { font-family: var(--lk-head); font-weight: 800; color: var(--lk-accent-2); letter-spacing: -0.1em; }

/* Sections */
.lk-cpred .section > h2,
.lk-cpred h2.section-title {
  font-weight: 800;
  font-size: 1.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--lk-accent) 0 60px, rgba(255, 59, 48, 0.2) 60px, transparent) 1;
}
.lk-cpred .section h3 { font-family: var(--lk-head); font-weight: 700; font-size: 1rem; letter-spacing: 0.14em; color: var(--lk-cyan); }
.lk-cpred .section ul > li::marker { color: var(--lk-accent); }

/* Cards: cut-corner street plates */
.lk-cpred .card {
  border: 1px solid #2a2023;
  border-top: 2px solid var(--lk-accent);
  background:
    linear-gradient(170deg, rgba(255, 59, 48, 0.06), transparent 40%),
    linear-gradient(170deg, var(--lk-panel-a), var(--lk-panel-b));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.lk-cpred .card:hover { border-color: #4a2a2d; border-top-color: var(--lk-accent-2); }
.lk-cpred .card-title { font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lk-title); }
.lk-cpred .badge { background: var(--lk-accent); color: #fff; border: 0; }
.lk-cpred .rule-key { border-left-color: var(--lk-accent-2); background: linear-gradient(90deg, rgba(255, 210, 63, 0.1), transparent); }

/* Tables */
.lk-cpred table.data-table thead th { font-family: var(--lk-head); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.12em; color: var(--lk-accent-2); }
.lk-cpred table.eq-table td.num,
.lk-cpred td.rt-roll { color: var(--lk-cyan); }
.lk-cpred tr.tbl-group td { font-weight: 800; font-size: 1.05rem; color: var(--lk-accent); }

/* Chips & buttons */
.lk-cpred .filter-chip { font-family: var(--lk-head); font-weight: 700; font-size: 0.86rem; }
.lk-cpred .filter-chip.active { background: var(--lk-accent); border-color: var(--lk-accent); color: #fff; }
.lk-cpred .btn-primary { background: var(--lk-accent); border-color: var(--lk-accent); color: #fff; }
.lk-cpred .btn-primary:hover { background: #ff5a50; }

/* Threats: wanted sheets */
.lk-cpred #adv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.lk-cpred .adv-card .card-title .badge { background: var(--lk-accent-2); color: var(--lk-ink); }

/* Roll boards */
.lk-cpred .rt-section { border: 1px solid #2a2023; border-left: 3px solid var(--lk-accent); }
.lk-cpred .rt-die-chip { background: var(--lk-accent-2); }
.lk-cpred .rt-result { border-color: var(--lk-cyan); color: #d9fbff; text-shadow: 0 0 8px rgba(79, 227, 240, 0.35); }

/* Quick strip: street-cred cards */
.lk-cpred .lk-quick-card { border: 1px solid #2a2023; border-top: 3px solid var(--lk-accent); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.lk-cpred .lk-quick-card h3 { font-family: var(--lk-head); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.16em; color: var(--lk-title); }
.lk-cpred .lk-ladder strong { background: var(--lk-accent); color: #fff; }
.lk-cpred .lk-formula { font-size: 1.2rem; }
.lk-cpred .lk-formula em { color: var(--lk-accent-2); }
.lk-cpred .lk-steps li::before { background: var(--lk-accent); color: #fff; }
.lk-cpred .lk-kv li strong { color: var(--lk-cyan); }

/* Motion (Full only): neon flicker on the kicker */
html[data-motion="full"] .lk-cpred .lk-kicker { animation: lk-cp-neon 7s infinite; }
@keyframes lk-cp-neon { 0%, 91%, 100% { opacity: 1; } 92% { opacity: 0.35; } 93% { opacity: 1; } 95% { opacity: 0.6; } }
html[data-motion="full"] .lk-cpred .lk-poster:hover { transform: rotate(0deg) scale(1.03); }

@media (max-width: 720px) {
  .lk-cpred .lk-watermark { right: -20px; font-size: 6rem; }
  .lk-cpred .lk-chapter-num { min-width: 64px; font-size: 1.6rem; }
  .lk-cpred .lk-chapter-name { font-size: 1.15rem; }
}