/* ============================================================
   Daggerheart — Zero 2 Hero deck theme
   Built on reveal.js core. Regular Wizards Co aesthetic
   (Roboto Condensed, uppercase condensed headings, dark stage)
   blended with the Daggerheart palette:
     Purple  #4B2C6E   (primary / Fear)
     Blue    #5BC8FF   (Hope / magic)
     Gold    #FFC24B   (Hope tokens)
     Pink    #FF609E   (studio accent)
   ============================================================ */

:root {
  --dh-purple: #4b2c6e;
  --dh-blue: #5bc8ff;
  --dh-gold: #ffc24b;
  --dh-pink: #ff609e;
  --dh-ink: #f6f3fb;
  --dh-grey: #b7aec8;
  --cond: "Roboto Condensed", system-ui, sans-serif;
}

html,
body {
  height: 100%;
  background: #0a0612;
}

/* the stage — Fear deep-purple to black, with Hope-blue and purple glows */
.reveal-viewport {
  background: #0a0612;
  background:
    radial-gradient(
      120% 90% at 80% -10%,
      rgba(91, 200, 255, 0.12),
      transparent 55%
    ),
    radial-gradient(
      120% 100% at 8% 112%,
      rgba(75, 44, 110, 0.55),
      transparent 60%
    ),
    linear-gradient(160deg, #180c2c 0%, #0a0612 72%);
}

.reveal {
  font-family: var(--cond);
  font-weight: 300;
  color: var(--dh-ink);
  font-size: 38px;
}
.reveal .slides {
  text-align: left;
}
.reveal .slide-inner {
  max-width: 1040px;
  margin: 0 auto;
}

/* ---- eyebrow / section label ---- */
.reveal .eyebrow {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.45em;
  color: var(--dh-gold);
  margin: 0 0 0.7em;
}

/* ---- headings ---- */
.reveal h1 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.92;
  font-size: 2.7em;
  margin: 0 0 0.18em;
  color: #fff;
}
.reveal h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  font-size: 1.9em;
  margin: 0 0 0.45em;
  color: #fff;
}
.reveal h2 .accent,
.reveal h1 .accent {
  color: var(--dh-blue);
}

/* ---- body ---- */
.reveal p {
  font-weight: 300;
  line-height: 1.5;
  color: var(--dh-grey);
  margin: 0 0 0.6em;
  font-size: 0.92em;
}
.reveal p.big {
  font-size: 1.04em;
  color: #e8e3f2;
  max-width: 24ch;
}
.reveal p.note {
  font-size: 0.8em;
  color: #897f9c;
}
.reveal strong {
  color: #fff;
  font-weight: 500;
}
.reveal .accent {
  color: var(--dh-blue);
}

/* ---- links ---- */
.reveal a {
  color: var(--dh-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 200, 255, 0.45);
  transition:
    color 0.15s,
    border-color 0.15s;
}
.reveal a:hover {
  color: #fff;
  border-color: #fff;
}

/* ---- chapter contents list ---- */
.reveal ul.toc {
  list-style: none;
  margin: 0.3em 0 0;
  padding: 0;
  columns: 2;
  column-gap: 48px;
}
.reveal ul.toc li {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7em;
  color: #d8d2e6;
  padding: 0.32em 0 0.32em 1em;
  position: relative;
  break-inside: avoid;
}
.reveal ul.toc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* vertically centre the dash with the text */
  width: 9px;
  height: 2px;
  background: var(--dh-pink);
}
.reveal ul.toc li em {
  color: #897f9c;
  font-style: normal;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- checklist recap ---- */
.reveal ul.checklist {
  list-style: none;
  margin: 0.2em 0 0;
  padding: 0;
}
.reveal ul.checklist li {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.34em 0 0.34em 1.7em;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.78em;
}
.reveal ul.checklist li:last-child {
  border-bottom: 0;
}
/* gold tick for each item */
.reveal ul.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.18em;
  color: var(--dh-gold);
  font-weight: 700;
  font-size: 0.95em;
}
.reveal ul.checklist li.optional::before {
  color: #6f6684;
}
.reveal ul.checklist .item {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
}
.reveal ul.checklist .hint {
  font-weight: 300;
  color: #897f9c;
  font-size: 0.85em;
}
.reveal ul.checklist li.optional .item {
  color: #c9c2d6;
}

/* ---- dice badges ---- */
.dice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0.2em 0 0.7em;
}
.die {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.62em;
  letter-spacing: 0.04em;
  color: var(--dh-gold);
  border: 1px solid rgba(255, 194, 75, 0.45);
  border-radius: 9px;
  padding: 0.28em 0.7em;
  background: rgba(255, 194, 75, 0.06);
}
/* duality dice — two different colours: Hope (blue) and Fear (magenta) */
.die.duality.hope {
  color: var(--dh-blue);
  border-color: rgba(91, 200, 255, 0.5);
  background: rgba(91, 200, 255, 0.07);
}
.die.duality.fear {
  color: var(--dh-pink);
  border-color: rgba(255, 96, 158, 0.5);
  background: rgba(255, 96, 158, 0.07);
}
.die em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-left: 0.2em;
}

/* ---- two-column slide (text + QR) ---- */
.split {
  display: flex;
  align-items: center;
  gap: 56px;
}
.split-text {
  flex: 1;
}
.split-text p.big {
  max-width: none;
}
.qr {
  flex: none;
  margin: 0;
  text-align: center;
}
.qr img {
  width: 300px;
  max-width: 34vw;
  background: #fff;
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.qr figcaption {
  margin-top: 0.7em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.5em;
  color: var(--dh-grey);
}

/* ---- title / end slides ---- */
.title-slide .slide-inner {
  text-align: center;
}
/* centre every paragraph horizontally (max-width blocks need auto margins) */
.title-slide .slide-inner p {
  margin-left: auto;
  margin-right: auto;
}
.title-slide .slide-inner p.big {
  max-width: 30ch;
}
.title-slide .wordmark {
  font-size: 3.2em;
}
.title-slide .tagline {
  font-size: 1em;
  color: #cfc8de;
  margin-top: 0.2em;
}
.title-slide .byline {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7em;
  color: #8e84a2;
  margin-top: 1.1em;
}
.title-slide .hint {
  font-size: 0.55em;
  color: #6e6580;
  margin-top: 2em;
}
.title-slide .end-link {
  margin-top: 1.2em;
}
.reveal .pink {
  color: var(--dh-pink);
}
kbd {
  font-family: var(--cond);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 0.05em 0.45em;
  color: #cfc8de;
}

/* ---- persistent chrome ---- */
.deck-nav {
  position: fixed;
  top: 18px;
  left: 24px;
  z-index: 40;
  font-family: var(--cond);
}
.deck-back {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--dh-grey);
  text-decoration: none;
  transition: color 0.15s;
}
.deck-back:hover {
  color: var(--dh-pink);
}

/* chapter navigation — gold = active, pink = hover, muted = disabled */
.deck-chapters {
  list-style: none;
  margin: 13px 0 0;
  padding: 0;
}
.deck-chapters li {
  margin: 0 0 5px;
}
.deck-chapters a,
.deck-chapters span {
  display: inline-block;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  color: #6f6684;
  text-decoration: none;
  border: 0;
  transition: color 0.15s;
}
.deck-chapters a.active {
  color: var(--dh-gold);
}
.deck-chapters a:hover {
  color: var(--dh-pink);
}
.deck-chapters .ch-disabled {
  color: #4d4660;
  cursor: default;
}

.deck-brand {
  position: fixed;
  bottom: 16px;
  left: 24px;
  z-index: 40;
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: #6a6276;
}
.deck-brand .pink {
  color: var(--dh-pink);
}

/* ---- reveal UI tint ---- */
.reveal .progress {
  color: var(--dh-pink);
  height: 4px;
}
.reveal .controls {
  color: var(--dh-blue);
}
.reveal .slide-number {
  background: transparent;
  color: #6a6276;
  font-family: var(--cond);
  left: 50%;
  right: auto;
  transform: translateX(-50%); /* centre the page number */
  bottom: 14px;
}

/* ---- small screens ---- */
@media (max-width: 640px) {
  .reveal {
    font-size: 28px;
  }
  .reveal ul.toc {
    columns: 1;
  }
  .split {
    flex-direction: column;
    gap: 22px;
  }
  .qr img {
    width: 200px;
    max-width: 50vw;
  }
  .deck-brand,
  .deck-chapters {
    display: none;
  }
}