/* Shadow of the Beanstalk library skin — "New Angeles": holo glass, hex grid, the Beanstalk as a beam of light.
   Structure: lib_skin.css. Body class: .lk-sotb. */

.lk-sotb {
  --lk-bg: #050a12;
  --lk-panel-a: rgba(20, 38, 58, 0.72);
  --lk-panel-b: rgba(9, 18, 30, 0.82);
  --lk-line: rgba(84, 224, 255, 0.16);
  --lk-line-strong: rgba(84, 224, 255, 0.4);
  --lk-accent: #54e0ff;
  --lk-accent-2: #ffc861;
  --lk-pink: #ff5fa2;
  --lk-ink: #03121a;
  --lk-title: #eef8ff;
  --lk-text: #d2e2ef;
  --lk-dim: #86a0b8;
  --lk-head: "Rajdhani", "Bahnschrift", "Segoe UI", sans-serif;
  --lk-radius: 6px;
  --lk-hex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'><path d='M14 0 L28 8.08 L28 24.25 L14 32.33 L0 24.25 L0 8.08 Z M14 32.33 L14 48.5' fill='none' stroke='%2354e0ff' stroke-opacity='.10' stroke-width='1'/></svg>");
  --lk-corners:
    linear-gradient(var(--lk-accent), var(--lk-accent)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--lk-accent), var(--lk-accent)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--lk-accent), var(--lk-accent)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--lk-accent), var(--lk-accent)) 100% 100% / 1px 14px no-repeat;
  --lk-page-bg:
    radial-gradient(900px 600px at 85% -10%, rgba(84, 224, 255, 0.10), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(255, 95, 162, 0.07), transparent 60%),
    #050a12;
  --lk-table-bg: rgba(7, 15, 26, 0.9);
  --tbl-line: rgba(84, 224, 255, 0.11);
  --tbl-line-strong: rgba(84, 224, 255, 0.3);
  --tbl-head: #0c1c2c;
  --tbl-stripe: rgba(84, 224, 255, 0.025);
  --tbl-hover: rgba(84, 224, 255, 0.07);
  --tbl-group: rgba(255, 200, 97, 0.10);
  --link: #8debff;
}

/* Sidebar: transit map */
.lk-sotb .sidebar { background: linear-gradient(180deg, rgba(8, 20, 34, 0.95), rgba(4, 10, 18, 0.98)); }
.lk-sotb .sidebar .nav-group-title { font-family: var(--lk-head); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lk-title); }
.lk-sotb .sidebar .nav-group-title::before { color: var(--lk-accent); }
.lk-sotb .sidebar .nav-link:hover,
.lk-sotb .sidebar .nav-link.active { color: var(--lk-accent); background: rgba(84, 224, 255, 0.08); box-shadow: inset 2px 0 0 var(--lk-accent); }

/* Hero: holo glass over the city */
.lk-sotb .lk-hero {
  border: 1px solid rgba(84, 224, 255, 0.35);
  border-radius: 4px;
  background:
    var(--lk-corners),
    var(--lk-hex) 0 0 / 28px 48.5px,
    radial-gradient(60% 120% at 80% 100%, rgba(255, 95, 162, 0.16), transparent 60%),
    radial-gradient(50% 90% at 80% 0%, rgba(84, 224, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #0b1a2b, #060d17);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 40px rgba(84, 224, 255, 0.08), 0 22px 50px rgba(0, 0, 0, 0.6);
}
.lk-sotb .lk-deco-a {
  /* the Beanstalk */
  right: 268px;
  top: -10px;
  bottom: -10px;
  width: 3px;
  background: linear-gradient(180deg, rgba(84, 224, 255, 0), rgba(84, 224, 255, 0.9) 20%, #fff 55%, rgba(84, 224, 255, 0.6) 85%, rgba(84, 224, 255, 0));
  box-shadow: 0 0 12px 3px rgba(84, 224, 255, 0.55), 0 0 60px 14px rgba(84, 224, 255, 0.18);
}
.lk-sotb .lk-deco-b {
  /* skyline silhouette */
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background:
    linear-gradient(0deg, rgba(3, 8, 14, 0.95), transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='70' preserveAspectRatio='none'><path d='M0 70 V48 H22 V30 H40 V44 H58 V20 H70 V12 H80 V20 H92 V40 H120 V26 H140 V50 H160 V34 H176 V8 H184 V34 H200 V46 H230 V28 H252 V42 H270 V18 H290 V44 H320 V36 H336 V14 H346 V36 H366 V50 H392 V24 H410 V38 H440 V30 H456 V10 H464 V30 H480 V46 H510 V26 H530 V40 H556 V22 H572 V44 H600 V70 Z' fill='%23081522'/><g fill='%2354e0ff' fill-opacity='.35'><rect x='60' y='26' width='2' height='2'/><rect x='64' y='32' width='2' height='2'/><rect x='178' y='16' width='2' height='2'/><rect x='338' y='20' width='2' height='2'/><rect x='458' y='18' width='2' height='2'/><rect x='272' y='24' width='2' height='2'/></g><g fill='%23ff5fa2' fill-opacity='.45'><rect x='122' y='32' width='2' height='2'/><rect x='394' y='30' width='2' height='2'/><rect x='512' y='32' width='2' height='2'/></g></svg>") 0 100% / 100% 70px no-repeat;
  opacity: 0.9;
}
.lk-sotb .lk-watermark {
  left: 34px;
  bottom: 8px;
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.6em;
  color: rgba(84, 224, 255, 0.4);
  z-index: 1;
}
.lk-sotb .lk-kicker { color: var(--lk-accent); text-shadow: 0 0 10px rgba(84, 224, 255, 0.5); }
.lk-sotb .lk-cursor { width: 8px; height: 8px; border: 1px solid var(--lk-accent); transform: rotate(45deg); box-shadow: 0 0 8px var(--lk-accent); }
.lk-sotb .lk-title {
  font-size: clamp(2.4rem, 5.8vw, 4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #dcefff 45%, #7fb6d6 52%, #e7f6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 18px rgba(84, 224, 255, 0.25));
}
.lk-sotb .lk-title .lk-accent {
  background: linear-gradient(180deg, #b9f4ff, #54e0ff 50%, #1aa7d1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lk-sotb .lk-lede { color: #c6d9ea; }
.lk-sotb .lk-tags li {
  padding: 4px 12px;
  border: 1px solid rgba(84, 224, 255, 0.35);
  background: rgba(6, 20, 32, 0.75);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  font-family: var(--lk-head);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lk-sotb .lk-tags strong { color: var(--lk-accent-2); }

/* Poster: the round lens from the cover, with a holo ring */
.lk-sotb .lk-poster { width: 216px; margin-right: 10px; text-align: center; }
.lk-sotb .lk-poster-frame {
  width: 196px;
  height: 196px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(84, 224, 255, 0.85);
  box-shadow: 0 0 0 6px rgba(5, 10, 18, 0.9), 0 0 0 7px rgba(84, 224, 255, 0.35), 0 0 34px rgba(84, 224, 255, 0.45);
}
.lk-sotb .lk-poster-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 40%), linear-gradient(180deg, transparent 60%, rgba(84, 224, 255, 0.25));
}
.lk-sotb .lk-poster::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 220px;
  height: 220px;
  margin-left: -110px;
  border-radius: 50%;
  border: 1px dashed rgba(84, 224, 255, 0.55);
  z-index: 0;
}
.lk-sotb .lk-poster img { height: 100%; object-position: 50% 20%; }
.lk-sotb .lk-poster figcaption { margin-top: 16px; align-items: center; }
.lk-sotb .lk-poster-cap {
  padding: 3px 12px;
  border: 1px solid rgba(255, 200, 97, 0.6);
  background: rgba(30, 20, 4, 0.7);
  font-family: var(--lk-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lk-accent-2);
}
.lk-sotb .lk-poster-sub { color: var(--lk-accent); }

/* Chapter banners: holo plate with a hex badge */
.lk-sotb .lk-chapter {
  border: 1px solid var(--lk-line-strong);
  border-radius: 4px;
  background: var(--lk-corners), linear-gradient(90deg, rgba(84, 224, 255, 0.12), rgba(8, 18, 30, 0.6) 40%, transparent);
  box-shadow: 0 0 24px rgba(84, 224, 255, 0.06);
}
.lk-sotb .lk-chapter-num {
  min-width: 80px;
  margin: 4px 0 4px 6px;
  font-size: 1.7rem;
  color: var(--lk-ink);
  background: linear-gradient(180deg, #b9f4ff, #54e0ff);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.lk-sotb .lk-chapter-name { font-size: 1.5rem; letter-spacing: 0.14em; }
.lk-sotb .lk-chapter-mark { color: var(--lk-accent-2); }

/* Sections */
.lk-sotb .section > h2,
.lk-sotb h2.section-title {
  font-size: 1.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--lk-accent), rgba(84, 224, 255, 0.2) 40%, transparent 80%) 1;
}
.lk-sotb .section > h2::before { content: "◈ "; color: var(--lk-accent); font-size: 0.8em; }
.lk-sotb .section h3 { color: var(--lk-accent-2); }

/* Cards: glass with corner brackets */
.lk-sotb .card {
  border: 1px solid var(--lk-line);
  border-radius: 4px;
  background: var(--lk-corners), linear-gradient(170deg, var(--lk-panel-a), var(--lk-panel-b));
  backdrop-filter: blur(4px);
}
.lk-sotb .card:hover { border-color: var(--lk-line-strong); box-shadow: 0 0 24px rgba(84, 224, 255, 0.12); }
.lk-sotb .card-title { font-size: 1.22rem; letter-spacing: 0.04em; color: var(--lk-title); }
.lk-sotb .badge { border-color: rgba(255, 200, 97, 0.5); }
.lk-sotb .rule-key { border-left-color: var(--lk-accent-2); background: linear-gradient(90deg, rgba(255, 200, 97, 0.1), transparent); }

/* Tables */
.lk-sotb table.data-table thead th { font-family: var(--lk-head); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.14em; }
.lk-sotb tr.tbl-group td { color: var(--lk-accent-2); }

/* Chips & buttons */
.lk-sotb .filter-chip { font-family: var(--lk-head); font-weight: 600; font-size: 0.86rem; }
.lk-sotb .filter-chip.active { box-shadow: 0 0 14px rgba(84, 224, 255, 0.45); }
.lk-sotb .btn-primary { box-shadow: 0 0 14px rgba(84, 224, 255, 0.35); }

/* Adversaries */
.lk-sotb .adv-card .card-title { color: var(--lk-title); }
.lk-sotb .adv-power { color: var(--lk-accent-2) !important; font-family: var(--lk-mono); }
.lk-sotb .adv-role-summary { color: var(--lk-accent) !important; }
.lk-sotb .adv-card-portrait { border-radius: 4px !important; box-shadow: inset 0 0 0 1px rgba(84, 224, 255, 0.3); }

/* Roll boards */
.lk-sotb .rt-section { background: var(--lk-corners), linear-gradient(170deg, var(--lk-panel-a), var(--lk-panel-b)); }
.lk-sotb .rt-result { box-shadow: 0 0 16px rgba(84, 224, 255, 0.2); }

/* Quick strip */
.lk-sotb .lk-quick-card { background: var(--lk-corners), linear-gradient(170deg, var(--lk-panel-a), var(--lk-panel-b)); }
.lk-sotb .lk-quick-card h3 { font-family: var(--lk-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.16em; }
.lk-sotb .lk-ladder li { grid-template-columns: 76px minmax(0, 1fr); }
.lk-sotb .lk-ladder strong .dice-icon { width: 12px !important; height: 12px !important; max-width: 12px !important; max-height: 12px !important; }
.lk-sotb .lk-ladder strong { display: flex; gap: 1px; justify-content: flex-start; background: transparent; min-height: 16px; }
.lk-sotb .lk-steps li::before { box-shadow: 0 0 8px rgba(84, 224, 255, 0.6); }
.lk-sotb .lk-dice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0 0 6px; }
.lk-sotb .lk-dice li { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 0; font-size: 0.8rem; white-space: nowrap; }
.lk-sotb .lk-dice li span { color: var(--lk-dim); font-size: 0.72rem; }
.lk-sotb .lk-quick-card hr { border: 0; border-top: 1px dashed var(--lk-line); margin: 6px 0; }

/* Motion (Full only): the Beanstalk pulses, the lens ring turns */
html[data-motion="full"] .lk-sotb .lk-deco-a { animation: lk-sb-beam 4s ease-in-out infinite alternate; }
@keyframes lk-sb-beam { from { opacity: 0.6; } to { opacity: 1; } }
html[data-motion="full"] .lk-sotb .lk-poster::before { animation: lk-sb-ring 40s linear infinite; }
@keyframes lk-sb-ring { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .lk-sotb .lk-deco-a { right: 24px; opacity: 0.5; }
  .lk-sotb .lk-chapter-num { min-width: 58px; font-size: 1.3rem; }
  .lk-sotb .lk-chapter-name { font-size: 1.05rem; letter-spacing: 0.08em; }
}