/* ==========================================================================
   OUTLAW PAGE FLIP — skutečná otevřená kniha pravidel.
   ========================================================================== */

.rulebook-page {
  --pf-orange: #e87810;
  --pf-orange-dark: #974307;
  --pf-paper: #d4bd91;
  --pf-paper-light: #ead8ad;
  --pf-ink: #30281d;
  width: min(1220px, calc(100% - 28px)) !important;
  margin: 30px auto 82px !important;
  padding: 0 !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
}

.rulebook-page *,
.rulebook-page *::before,
.rulebook-page *::after { box-sizing: border-box; }

.rulebook-source[hidden] { display: none !important; }

.pageflip-intro {
  margin: 0 auto 18px;
  text-align: center;
  animation: pfIntro .65s ease both;
}
.pageflip-intro p {
  margin: 0 0 7px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font: 600 10px/1.4 'Oswald', sans-serif !important;
  letter-spacing: .34em !important;
  text-transform: uppercase !important;
}
.pageflip-intro h1 {
  margin: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font: 400 clamp(34px, 5vw, 57px)/1 'Rye', serif !important;
  letter-spacing: -.02em !important;
  text-shadow: 3px 3px 0 #000 !important;
  text-transform: uppercase !important;
}
.pageflip-intro h1 em {
  color: var(--pf-orange) !important;
  -webkit-text-fill-color: var(--pf-orange) !important;
  font-style: normal !important;
}
.pageflip-intro > span {
  display: block;
  margin-top: 8px;
  color: #bab6af;
  font: 500 11px/1.4 'Oswald', sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
@keyframes pfIntro {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.pageflip-stage {
  position: relative;
  padding: 0 54px;
  perspective: 2400px;
}

.pageflip-book {
  position: relative;
  margin: 0 auto;
  padding: 16px;
  background:
    linear-gradient(90deg, #160d07, #402713 2%, #160d08 4%, #160d08 96%, #402713 98%, #160d07);
  border: 2px solid #120b06;
  border-radius: 14px 14px 12px 12px;
  box-shadow:
    0 28px 65px rgba(0,0,0,.76),
    0 8px 0 #0d0804,
    0 11px 0 rgba(232,120,16,.38),
    inset 0 0 0 2px rgba(255,211,145,.12);
  animation: pfBookOpen .9s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes pfBookOpen {
  from { opacity: 0; transform: perspective(1400px) rotateX(13deg) scale(.92); }
  to { opacity: 1; transform: perspective(1400px) rotateX(0) scale(1); }
}

.pageflip-spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  aspect-ratio: 1.55 / 1;
  min-height: 560px;
  max-height: 700px;
  overflow: visible;
  background: #b69b70;
  border-radius: 5px 5px 8px 8px;
  transform-style: preserve-3d;
}

.pageflip-page,
.pageflip-face {
  position: relative;
  overflow: hidden;
  color: var(--pf-ink);
  background-color: var(--pf-paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,248,210,.65), transparent 31%),
    radial-gradient(circle at 82% 87%, rgba(111,70,29,.12), transparent 38%),
    repeating-linear-gradient(0deg, rgba(92,59,27,.032) 0 1px, transparent 1px 4px);
  border: 1px solid rgba(83,49,20,.34);
}
.pageflip-left {
  border-radius: 5px 0 0 8px;
  box-shadow:
    inset -28px 0 38px -28px rgba(30,17,8,.72),
    inset 12px 0 22px -18px rgba(48,27,11,.58);
}
.pageflip-right {
  border-radius: 0 5px 8px 0;
  box-shadow:
    inset 28px 0 38px -28px rgba(30,17,8,.72),
    inset -12px 0 22px -18px rgba(48,27,11,.58);
}
.pageflip-page::before,
.pageflip-face::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 5;
  border: 1px solid rgba(100,58,21,.14);
  pointer-events: none;
}
.pageflip-page::after,
.pageflip-face::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  background:
    linear-gradient(115deg, transparent 0 47%, rgba(80,48,22,.035) 48%, transparent 50%),
    radial-gradient(ellipse at center, transparent 62%, rgba(69,40,17,.11));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.pageflip-gutter {
  position: absolute;
  z-index: 15;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 35px;
  background: linear-gradient(90deg,
    transparent,
    rgba(32,18,8,.22) 24%,
    rgba(24,13,6,.63) 48%,
    rgba(255,244,206,.12) 55%,
    rgba(32,18,8,.17) 78%,
    transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.pageflip-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(31px, 4vw, 52px) clamp(30px, 4vw, 52px) 28px;
}
.pageflip-page-number {
  position: absolute;
  right: 28px;
  bottom: 18px;
  color: rgba(52,39,24,.62);
  font: 600 11px/1 'Oswald', sans-serif;
  letter-spacing: .12em;
}
.pageflip-left .pageflip-page-number { right: auto; left: 28px; }

/* Titulní strana knihy */
.pf-title-page {
  justify-content: center;
  text-align: center;
}
.pf-title-page .pf-small {
  color: var(--pf-orange-dark);
  font: 700 10px/1.4 'Oswald', sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.pf-title-page h2 {
  margin: 20px 0 15px !important;
  color: #2d2419 !important;
  -webkit-text-fill-color: #2d2419 !important;
  font: 400 clamp(36px, 5vw, 69px)/.92 'Rye', serif !important;
  text-transform: uppercase !important;
}
.pf-title-page h2 em {
  display: block;
  color: var(--pf-orange) !important;
  -webkit-text-fill-color: var(--pf-orange) !important;
  font-style: normal;
}
.pf-title-page p {
  max-width: 360px;
  margin: 0 auto !important;
  color: #493b2b !important;
  -webkit-text-fill-color: #493b2b !important;
  font: italic 500 14px/1.75 'Roboto Slab', Georgia, serif !important;
}
.pf-title-ornament {
  width: 110px;
  height: 1px;
  margin: 22px auto;
  background: var(--pf-orange-dark);
}
.pf-title-mark {
  width: 118px;
  height: 104px;
  display: grid;
  place-content: center;
  margin: 0 auto 13px;
  border: 0;
  outline: 0;
  border-radius: 0;
}
.pf-title-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(54,29,10,.28));
}

/* Obsah knihy */
.pf-toc-page h2,
.pf-chapter-page h2 {
  margin: 0 0 18px !important;
  color: var(--pf-orange-dark) !important;
  -webkit-text-fill-color: var(--pf-orange-dark) !important;
  font: 400 clamp(25px, 3vw, 39px)/1.05 'Rye', serif !important;
  text-transform: uppercase !important;
}
.pf-toc-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.pf-toc-item {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: baseline;
  gap: 9px;
  padding: 10px 0;
  color: #33291e;
  background: none;
  border: 0;
  border-bottom: 1px dotted rgba(62,42,22,.4);
  font: 600 13px/1.4 'Oswald', sans-serif;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.pf-toc-item b { color: var(--pf-orange-dark); }
.pf-toc-item small {
  color: rgba(50,39,27,.58);
  font-size: 10px;
}
.pf-toc-item:hover { color: var(--pf-orange-dark); }

.pf-quote-page {
  justify-content: center;
}
.pf-quote-page blockquote {
  position: relative;
  margin: 0 !important;
  padding: 12px 0 12px 25px !important;
  color: #352b20 !important;
  border-left: 4px solid var(--pf-orange-dark);
  font: italic 500 clamp(20px, 2.5vw, 31px)/1.5 'Roboto Slab', Georgia, serif !important;
}
.pf-quote-page cite {
  display: block;
  margin-top: 20px;
  color: var(--pf-orange-dark);
  font: 700 10px/1.4 'Oswald', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.pf-sketch {
  width: 62%;
  max-height: 245px;
  margin: 0 auto 25px;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1) sepia(.5) contrast(1.15);
  opacity: .76;
  mix-blend-mode: multiply;
}

/* Začátek kapitoly */
.pf-chapter-page {
  justify-content: center;
  text-align: center;
}
.pf-chapter-page .pf-chapter-no {
  color: var(--pf-orange-dark);
  font: 700 11px/1 'Oswald', sans-serif;
  letter-spacing: .35em;
  text-transform: uppercase;
}
.pf-chapter-page h2 {
  margin: 18px 0 !important;
  font-size: clamp(31px, 4vw, 52px) !important;
}
.pf-chapter-page p {
  max-width: 330px;
  margin: 0 auto !important;
  color: #514331 !important;
  -webkit-text-fill-color: #514331 !important;
  font: italic 500 15px/1.7 'Roboto Slab', Georgia, serif !important;
}
.pf-chapter-rule {
  width: 140px;
  height: 2px;
  margin: 25px auto;
  background: linear-gradient(90deg, transparent, var(--pf-orange-dark), transparent);
}

/* Jedno pravidlo na jedné stránce */
.pf-rule-page { justify-content: flex-start; }
.pf-rule-page .rule-block {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pf-ink) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.pf-rule-page .rule-block:hover {
  background: none !important;
  border: 0 !important;
  transform: none !important;
}
.pf-rule-page .rule-block h3 {
  display: block !important;
  margin: 0 0 19px !important;
  padding: 0 0 13px !important;
  color: #2c241b !important;
  -webkit-text-fill-color: #2c241b !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(151,67,7,.5) !important;
  font: 600 clamp(17px, 2vw, 23px)/1.25 'Oswald', sans-serif !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
.pf-rule-page .rule-number {
  display: inline-block !important;
  margin: 0 9px 0 0 !important;
  padding: 4px 8px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--pf-orange-dark) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font: 700 10px/1 'Oswald', sans-serif !important;
  vertical-align: middle;
}
.pf-rule-page .rule-block p,
.pf-rule-page .rule-block li {
  color: var(--pf-ink) !important;
  -webkit-text-fill-color: var(--pf-ink) !important;
  font: 500 clamp(12px, 1.2vw, 14px)/1.72 'Roboto Slab', Georgia, serif !important;
  text-shadow: none !important;
}
.pf-rule-page .rule-block p { margin: 0 !important; }
.pf-rule-page .rule-block ul { margin: 0 !important; padding-left: 20px !important; }
.pf-rule-page .rule-block li { margin-bottom: 7px !important; }
.pf-rule-page .rule-block strong {
  color: #251e16 !important;
  -webkit-text-fill-color: #251e16 !important;
  font-weight: 700 !important;
}
.pf-rule-page .highlight-red {
  color: var(--pf-orange-dark) !important;
  -webkit-text-fill-color: var(--pf-orange-dark) !important;
  font-weight: 700 !important;
}
.pf-rule-page .example-box {
  margin: 17px 0 0 !important;
  padding: 12px 14px !important;
  color: #3c3022 !important;
  -webkit-text-fill-color: #3c3022 !important;
  background: rgba(108,68,29,.08) !important;
  border: 1px solid rgba(82,52,25,.28) !important;
  border-left: 3px solid var(--pf-orange-dark) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: italic 500 12px/1.6 'Roboto Slab', Georgia, serif !important;
}
.pf-rule-page .example-box *,
.pf-rule-page .example-title {
  color: #3c3022 !important;
  -webkit-text-fill-color: #3c3022 !important;
}
.pf-rule-page .example-title {
  display: block !important;
  margin-bottom: 5px !important;
  color: var(--pf-orange-dark) !important;
  -webkit-text-fill-color: var(--pf-orange-dark) !important;
  font: 700 9px/1.3 'Oswald', sans-serif !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

/* Animovaný list ležící nad knihou */
.pageflip-turner {
  position: absolute;
  z-index: 30;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  display: none;
  transform-style: preserve-3d;
  pointer-events: none;
}
.pageflip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.pageflip-back { transform: rotateY(180deg); }
.pageflip-turner.is-next {
  display: block;
  transform-origin: left center;
  animation: pfTurnNext .82s cubic-bezier(.4,.05,.2,1) forwards;
}
.pageflip-turner.is-prev {
  left: 0;
  display: block;
  transform-origin: right center;
  animation: pfTurnPrev .82s cubic-bezier(.4,.05,.2,1) forwards;
}
@keyframes pfTurnNext {
  0% { transform: rotateY(0deg); filter: drop-shadow(-3px 3px 5px rgba(0,0,0,.12)); }
  48% { filter: drop-shadow(-22px 7px 16px rgba(0,0,0,.46)); }
  100% { transform: rotateY(-180deg); filter: drop-shadow(-3px 3px 5px rgba(0,0,0,.08)); }
}
@keyframes pfTurnPrev {
  0% { transform: rotateY(0deg); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.12)); }
  48% { filter: drop-shadow(22px 7px 16px rgba(0,0,0,.46)); }
  100% { transform: rotateY(180deg); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.08)); }
}

/* Ovládání */
.pageflip-arrow {
  position: absolute;
  z-index: 40;
  top: 50%;
  width: 47px;
  height: 78px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: rgba(6,6,6,.88);
  border: 1px solid rgba(232,120,16,.58);
  border-radius: 0;
  font: 400 38px/1 Georgia, serif;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s, background .2s, opacity .2s;
}
.pageflip-arrow:hover {
  color: #111;
  background: var(--pf-orange);
}
.pageflip-arrow:disabled { opacity: .2; cursor: default; }
.pageflip-prev { left: -47px; }
.pageflip-next { right: -47px; }

.pageflip-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 22px auto 0;
  color: #fff;
}
.pageflip-first,
.pageflip-chapters button {
  padding: 8px 12px;
  color: #fff;
  background: #0b0b0b;
  border: 1px solid rgba(232,120,16,.48);
  border-radius: 0;
  font: 600 9px/1.25 'Oswald', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.pageflip-first:hover,
.pageflip-chapters button:hover,
.pageflip-chapters button.is-active {
  color: #111;
  background: var(--pf-orange);
  border-color: var(--pf-orange);
}
.pageflip-chapters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}
.pageflip-counter {
  min-width: 72px;
  color: var(--pf-orange);
  font: 600 10px/1 'Oswald', sans-serif;
  letter-spacing: .14em;
  text-align: right;
}
.pageflip-help {
  margin: 13px 0 0 !important;
  color: #8f8c86 !important;
  -webkit-text-fill-color: #8f8c86 !important;
  font: 500 10px/1.5 'Oswald', sans-serif !important;
  letter-spacing: .12em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* Mobil: jeden skutečný list, animace zůstává */
@media (max-width: 760px) {
  .rulebook-page {
    width: min(100% - 14px, 1220px) !important;
    margin: 18px auto 58px !important;
  }
  .pageflip-intro > span { font-size: 9px; }
  .pageflip-stage { padding: 0 7px; }
  .pageflip-book { padding: 10px; border-radius: 9px; }
  .pageflip-spread {
    display: block;
    aspect-ratio: auto;
    min-height: 650px;
    max-height: none;
  }
  .pageflip-left { display: none; }
  .pageflip-right {
    width: 100%;
    height: 650px;
    border-radius: 5px;
  }
  .pageflip-gutter { display: none; }
  .pageflip-content { padding: 38px 29px 28px; }
  .pageflip-turner,
  .pageflip-turner.is-prev {
    left: 0;
    width: 100%;
    height: 650px;
    transform-origin: left center;
  }
  .pageflip-turner.is-prev { transform-origin: right center; }
  .pageflip-prev { left: -3px; }
  .pageflip-next { right: -3px; }
  .pageflip-arrow {
    top: auto;
    bottom: 14px;
    width: 41px;
    height: 42px;
    font-size: 29px;
    transform: none;
  }
  .pageflip-toolbar {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .pageflip-first { justify-self: start; }
  .pageflip-chapters {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .pageflip-counter { grid-column: 2; grid-row: 1; }
  .pf-sketch { width: 75%; }
}

@media (prefers-reduced-motion: reduce) {
  .pageflip-intro,
  .pageflip-book,
  .pageflip-turner { animation-duration: .01ms !important; }
}

/* ==========================================================================
   RDR2 JOURNAL v2 — obraz skutečné knihy dodaný majitelem webu.
   ========================================================================== */
.pageflip-book {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.72);
}

.pageflip-spread {
  aspect-ratio: 440 / 306;
  min-height: 0;
  max-height: none;
  background: url('/assets/images/rules/rdr2-open-book.png') center / 100% 100% no-repeat;
  border-radius: 0;
}

.pageflip-page,
.pageflip-face {
  background-color: transparent;
  background-image: url('/assets/images/rules/rdr2-open-book.png');
  background-repeat: no-repeat;
  background-size: 200% 100%;
  border: 0;
  border-radius: 0;
}
.pageflip-left,
.pageflip-face[data-side='left'] {
  background-position: left center;
  box-shadow: none;
}
.pageflip-right,
.pageflip-face[data-side='right'] {
  background-position: right center;
  box-shadow: none;
}
.pageflip-page::before,
.pageflip-page::after,
.pageflip-face::before,
.pageflip-face::after { display: none; }

.pageflip-gutter {
  width: 62px;
  background: linear-gradient(90deg,
    transparent,
    rgba(32,21,12,.18) 25%,
    rgba(25,16,9,.3) 47%,
    rgba(255,244,213,.07) 55%,
    rgba(36,22,12,.14) 76%,
    transparent);
}

.pageflip-left .pageflip-content,
.pageflip-face[data-side='left'] .pageflip-content {
  padding-right: clamp(44px, 5vw, 68px);
  padding-left: clamp(38px, 4.5vw, 58px);
}
.pageflip-right .pageflip-content,
.pageflip-face[data-side='right'] .pageflip-content {
  padding-left: clamp(44px, 5vw, 68px);
  padding-right: clamp(38px, 4.5vw, 58px);
}

.pf-rule-page .rule-block h3,
.pf-toc-page h2,
.pf-chapter-page h2 {
  font-family: 'Rye', Georgia, serif !important;
  font-weight: 400 !important;
}
.pf-rule-page .rule-block p,
.pf-rule-page .rule-block li,
.pf-rule-page .example-box,
.pf-title-page p,
.pf-chapter-page p,
.pf-quote-page blockquote {
  font-family: 'Special Elite', 'Roboto Slab', Georgia, serif !important;
  letter-spacing: .01em !important;
}
.pf-rule-page .rule-block p,
.pf-rule-page .rule-block li {
  font-size: clamp(12px, 1.18vw, 14px) !important;
  line-height: 1.63 !important;
}

@media (max-width: 760px) {
  .pageflip-book { padding: 0; }
  .pageflip-spread {
    min-height: 610px;
    background-size: 200% 100%;
    background-position: right center;
  }
  .pageflip-right { height: 610px; }
  .pageflip-turner,
  .pageflip-turner.is-prev { height: 610px; }
  .pageflip-right .pageflip-content,
  .pageflip-face[data-side='right'] .pageflip-content,
  .pageflip-face[data-side='left'] .pageflip-content {
    padding: 48px 39px 52px 48px;
  }
}