body { overflow-x: hidden; }

.page-shell {
  width: min(1560px, calc(100% - 30px));
  margin: 0 auto;
  padding: 26px 0 62px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--k-gold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.chronicles-hero {
  min-height: 325px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 34px;
  padding: clamp(30px, 5vw, 56px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,9,10,.95), rgba(10,12,13,.78) 58%, rgba(10,12,13,.42)),
    radial-gradient(circle at 12% 0%, rgba(214,168,79,.16), transparent 30rem),
    url('/assets/chronicles/banner.png') center / cover no-repeat;
}

.chronicles-hero::after {
  content: '';
  position: absolute;
  right: -95px;
  bottom: -170px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(214,168,79,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(214,168,79,.02), 0 0 0 62px rgba(214,168,79,.012);
}

.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 {
  max-width: 920px;
  margin: 0 0 14px;
  font-size: clamp(3rem, 7vw, 6.7rem);
  line-height: .9;
  letter-spacing: -.048em;
}
.hero-copy > p:not(.eyebrow) {
  max-width: 820px;
  color: var(--k-muted);
  line-height: 1.68;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.hero-book {
  position: relative;
  z-index: 1;
  min-height: 235px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 28px;
  border: 1px solid rgba(214,168,79,.38);
  border-radius: 18px 18px 24px 24px;
  background:
    linear-gradient(90deg, transparent 48.8%, rgba(214,168,79,.18) 49.5%, rgba(214,168,79,.18) 50.5%, transparent 51.2%),
    radial-gradient(circle at 50% 25%, rgba(214,168,79,.15), transparent 55%),
    linear-gradient(135deg, rgba(87,54,28,.95), rgba(34,23,17,.98));
  box-shadow: inset 0 0 0 8px rgba(0,0,0,.18), 0 18px 36px rgba(0,0,0,.42);
  text-align: center;
}
.hero-book::before,
.hero-book::after {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(transparent, rgba(241,201,109,.42), transparent);
}
.hero-book::before { left: 22px; }
.hero-book::after { right: 22px; }
.book-rune { color: var(--k-gold-2); font-size: 4.3rem; filter: drop-shadow(0 0 16px rgba(214,168,79,.28)); }
.hero-book strong, .hero-book small { display: block; }
.hero-book strong { margin-top: 8px; color: var(--k-gold-2); letter-spacing: .09em; text-transform: uppercase; }
.hero-book small { margin-top: 7px; color: var(--k-muted); line-height: 1.45; }

.player-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-top: 18px;
  padding: 18px;
}
.player-search label {
  display: block;
  margin-bottom: 8px;
  color: var(--k-gold-2);
  font-weight: 800;
}
.search-row { display: flex; gap: 9px; }
.search-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  color: var(--k-text);
  background: rgba(0,0,0,.32);
  outline: 0;
}
.search-row input:focus {
  border-color: rgba(214,168,79,.72);
  box-shadow: 0 0 0 3px rgba(214,168,79,.1);
}
.status-line { margin: 10px 0 0; color: var(--k-muted); }
.status-line.ok { color: #9bd585; }
.status-line.error { color: #e38a7c; }

.chronicle-owner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  padding: 12px 14px;
  border: 1px solid var(--k-line);
  border-radius: 10px;
  background: rgba(0,0,0,.23);
}
.owner-mark { font-size: 2rem; }
.chronicle-owner small, .chronicle-owner strong { display: block; }
.chronicle-owner small { color: var(--k-muted); }
.chronicle-owner strong { margin-top: 3px; color: var(--k-gold-2); }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.summary-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 15px;
}
.summary-card > span { grid-row: 1 / 3; font-size: 1.7rem; }
.summary-card small { color: var(--k-muted); }
.summary-card strong { color: var(--k-gold-2); font-size: 1.06rem; }

.chronicles-intro {
  margin-top: 18px;
  padding: 18px;
}
.chronicles-intro p { margin: 0; color: var(--k-muted); line-height: 1.65; }

.chronicle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin-top: 18px;
  align-items: stretch;
}

.chronicle-card {
  min-height: 410px;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(145px, .58fr) minmax(0, 1.42fr);
  overflow: hidden;
  padding: 0;
  border-width: 2px;
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.chronicle-card:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
  border-color: rgba(214,168,79,.55);
}

.card-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--k-line);
  background: rgba(0,0,0,.28);
}
.card-art::before,
.card-art::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(236,205,142,.13);
  border-radius: 50%;
}
.card-art::before { width: 170px; height: 170px; }
.card-art::after { width: 220px; height: 220px; }
.card-art img {
  position: relative;
  z-index: 1;
  width: min(82%, 230px);
  max-height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.55));
}
.card-art-classes { background: radial-gradient(circle, rgba(185,74,61,.28), transparent 62%), linear-gradient(145deg, #2a1a18, #101314); }
.card-art-world { background: radial-gradient(circle, rgba(119,184,91,.25), transparent 62%), linear-gradient(145deg, #17251a, #101314); }
.card-art-bestiary { background: radial-gradient(circle, rgba(214,168,79,.28), transparent 62%), linear-gradient(145deg, #30261a, #111314); }
.card-art-arena { background: radial-gradient(circle, rgba(185,74,61,.26), transparent 62%), linear-gradient(145deg, #2a1818, #101314); }
.card-art-items { background: radial-gradient(circle, rgba(117,167,189,.25), transparent 62%), linear-gradient(145deg, #18242a, #101314); }
.card-art-achievements { background: radial-gradient(circle, rgba(154,111,209,.24), transparent 62%), linear-gradient(145deg, #211a2a, #101314); }

.card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 3vw, 34px);
}
.card-kicker {
  margin: 0 0 7px;
  color: var(--k-gold);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.card-copy h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
}
.card-copy > p:not(.card-kicker) {
  margin: 13px 0 0;
  color: var(--k-muted);
  line-height: 1.6;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 20px;
}
.card-tags span {
  padding: 5px 8px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  color: var(--k-muted);
  background: rgba(0,0,0,.2);
  font-size: .78rem;
}
.chronicle-link { margin-top: auto; }

.archive-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 18px;
  border-color: rgba(214,168,79,.28);
}
.archive-note > span { font-size: 2rem; }
.archive-note strong { color: var(--k-gold-2); }
.archive-note p { margin: 6px 0 0; color: var(--k-muted); line-height: 1.55; }

@media (max-width: 1320px) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chronicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chronicle-card { grid-template-columns: 210px 1fr; }
}

@media (max-width: 880px) {
  .chronicles-hero { grid-template-columns: 1fr; }
  .hero-book { width: min(280px, 100%); justify-self: center; }
  .player-bar { grid-template-columns: 1fr; }
  .chronicle-owner { min-width: 0; }
  .chronicle-grid { grid-template-columns: 1fr; }
  .chronicle-card { grid-template-columns: 190px 1fr; min-height: 360px; }
}

@media (max-width: 650px) {
  .page-shell { width: min(100% - 18px, 1560px); padding-top: 14px; }
  .search-row { flex-direction: column; }
  .summary-grid { grid-template-columns: 1fr; }
  .chronicle-card { grid-template-columns: 1fr; min-height: 0; }
  .card-art { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--k-line); }
  .archive-note { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}


/* Patch 0.10.23 – osobní odhalování Kronik */
.summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.discovery-summary-card { border-color: rgba(154,111,209,.26); }
.card-art-arena { background: radial-gradient(circle, rgba(185,74,61,.3), transparent 62%), linear-gradient(145deg, #2c1817, #101314); }
.discovery-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: -6px 0 14px;
  padding: 6px 9px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  color: var(--k-gold-2);
  background: rgba(214,168,79,.07);
  font-size: .78rem;
}
.discovery-state span { line-height: 1; }
.chronicle-card.is-locked {
  border-color: rgba(169,157,135,.2);
  filter: saturate(.42);
}
.chronicle-card.is-locked:hover { transform: none; filter: saturate(.48); }
.chronicle-card.is-locked .card-art::after {
  content: '🔒';
  z-index: 3;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(236,205,142,.25);
  background: rgba(8,9,10,.84);
  font-size: 2.2rem;
}
.chronicle-card.is-locked .chronicle-link {
  cursor: not-allowed;
  color: var(--k-muted);
  background: rgba(255,255,255,.04);
  box-shadow: none;
}
.personal-discovery { margin-top: 18px; padding: 18px; }
.discovery-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.discovery-step {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--k-line);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
}
.discovery-step > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--k-line);
  border-radius: 9px;
  background: rgba(0,0,0,.28);
  font-size: 1.2rem;
}
.discovery-step strong, .discovery-step small { display: block; }
.discovery-step strong { color: var(--k-text); }
.discovery-step small { margin-top: 4px; color: var(--k-muted); line-height: 1.4; }
.discovery-step.is-unlocked { border-color: rgba(119,184,91,.3); }
.discovery-step.is-unlocked > span { color: #a9da86; background: rgba(119,184,91,.08); }
.discovery-step.is-locked { opacity: .72; }

@media (max-width: 1280px) {
  .summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .discovery-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .summary-grid, .discovery-steps { grid-template-columns: 1fr; }
}

/* 0.10.25a13 – jednotná zamykací pečeť z pixelartového UI balíku */
.chronicle-card.is-locked .card-art::after {
  content: '';
  width: 92px;
  height: 92px;
  border: 0;
  background: url('/assets/ui/lock-seal.png') center / contain no-repeat;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.72));
  font-size: 0;
}

.card-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; }
.card-actions .chronicle-link { margin-top:0; }
.card-art-relics { background: radial-gradient(circle, rgba(116,92,166,.26), transparent 62%), linear-gradient(145deg, #211b2d, #101314); }
.card-art-stories { background: radial-gradient(circle, rgba(184,123,64,.27), transparent 62%), linear-gradient(145deg, #2d2017, #101314); }
/* Osm svazků zachovává stejnou velikost karet. */
.summary-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
@media (max-width: 1450px) { .summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 850px) { .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .summary-grid { grid-template-columns: 1fr; } }

/* 0.10.25a194f — čistý rozcestník: banner → svazky. */
.chronicle-grid{margin-top:18px}
/* 0.10.25a194p8 — Svazek VII používá vlastní širokou kronikářskou ilustraci. */
.card-art-stories::before,.card-art-stories::after { display:none; }
.card-art-stories img { width:100%; height:100%; max-height:none; object-fit:cover; object-position:center; opacity:.82; filter:sepia(.12) contrast(1.04) brightness(.88); }


/* 0.10.25a194p10 — sjednocené hřbety sedmi svazků Kronik. */
.chronicle-grid {
  gap: 18px;
}

.chronicle-card {
  --spine-glow: 214, 168, 79;
  min-height: 420px;
  grid-template-columns: 116px minmax(0, 1fr);
  background:
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 30%),
    linear-gradient(180deg, rgba(13,15,16,.98), rgba(9,10,11,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 34px rgba(0,0,0,.24);
}

.chronicle-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 22px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(214,168,79,.05);
}

.card-art.card-art-spine {
  isolation: isolate;
  min-height: 100%;
  padding: 14px 12px;
  border-right: 1px solid rgba(214,168,79,.23);
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 18%, transparent 82%, rgba(0,0,0,.36)),
    radial-gradient(ellipse at 50% 48%, rgba(var(--spine-glow), .11), transparent 60%),
    linear-gradient(180deg, #171a1b 0%, #111416 48%, #0d0f10 100%);
}

.card-art.card-art-spine::before {
  content: '';
  display: block;
  position: absolute;
  inset: 10px 8px;
  width: auto;
  height: auto;
  border: 1px solid rgba(214,168,79,.11);
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent, rgba(214,168,79,.045) 48%, rgba(214,168,79,.045) 52%, transparent),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px);
  box-shadow: inset 0 0 28px rgba(0,0,0,.38);
  pointer-events: none;
}

.card-art.card-art-spine::after {
  content: '';
  display: block;
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 10px;
  width: auto;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  filter: blur(4px);
  pointer-events: none;
}

.card-art.card-art-spine img {
  position: relative;
  z-index: 2;
  width: auto;
  height: min(388px, calc(100% - 24px));
  max-width: 84px;
  max-height: calc(100% - 24px);
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter:
    drop-shadow(0 12px 12px rgba(0,0,0,.62))
    drop-shadow(0 0 10px rgba(var(--spine-glow), .08));
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease;
}

.chronicle-card:hover .card-art.card-art-spine img {
  transform: translateY(-3px);
  filter:
    drop-shadow(0 15px 14px rgba(0,0,0,.68))
    drop-shadow(0 0 13px rgba(var(--spine-glow), .12));
}

.card-art-classes { --spine-glow: 181, 116, 61; }
.card-art-world { --spine-glow: 105, 142, 87; }
.card-art-bestiary { --spine-glow: 164, 159, 145; }
.card-art-arena { --spine-glow: 166, 66, 55; }
.card-art-items { --spine-glow: 75, 121, 153; }
.card-art-achievements { --spine-glow: 128, 85, 169; }
.card-art-stories { --spine-glow: 156, 106, 57; }

.card-art-stories::before,
.card-art-stories::after {
  display: block;
}

.card-art-stories img {
  width: auto;
  height: min(388px, calc(100% - 24px));
  max-width: 84px;
  max-height: calc(100% - 24px);
  object-fit: contain;
  opacity: 1;
  filter:
    drop-shadow(0 12px 12px rgba(0,0,0,.62))
    drop-shadow(0 0 10px rgba(var(--spine-glow), .08));
}

.card-copy {
  padding: clamp(24px, 2.4vw, 32px);
}

.card-copy h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.72rem);
}

.card-copy > p:not(.card-kicker) {
  max-width: 46rem;
}

/* Zamykací pečeť zůstává nad hřbetem, ale je menší a nepřekrývá římské číslo. */
.chronicle-card.is-locked .card-art.card-art-spine::after {
  content: '';
  z-index: 4;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 64px;
  height: 64px;
  border-radius: 0;
  background: url('/assets/ui/lock-seal.png') center / contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.72));
  transform: translate(-50%, -50%);
}

/* Sedm svazků — pokud se souhrnná mřížka znovu použije, odpovídá skutečnému počtu. */
.summary-grid { grid-template-columns: repeat(7, minmax(0,1fr)); }

@media (max-width: 1450px) {
  .summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 1320px) {
  .chronicle-card { grid-template-columns: 112px minmax(0,1fr); }
}

@media (max-width: 880px) {
  .chronicle-card {
    grid-template-columns: 104px minmax(0,1fr);
    min-height: 365px;
  }
  .card-art.card-art-spine img,
  .card-art-stories img {
    height: min(330px, calc(100% - 22px));
    max-width: 72px;
  }
}

@media (max-width: 650px) {
  .chronicle-card {
    grid-template-columns: 88px minmax(0,1fr);
    min-height: 330px;
  }
  .card-art.card-art-spine {
    min-height: 100%;
    padding: 12px 8px;
    border-right: 1px solid rgba(214,168,79,.23);
    border-bottom: 0;
  }
  .card-art.card-art-spine img,
  .card-art-stories img {
    height: min(292px, calc(100% - 18px));
    max-width: 61px;
  }
  .card-copy { padding: 20px 17px; }
  .card-copy h2 { font-size: clamp(1.55rem, 7vw, 2.15rem); }
  .card-copy > p:not(.card-kicker) { line-height: 1.52; }
  .card-tags { margin: 13px 0 16px; }
}

@media (max-width: 430px) {
  .chronicle-card { grid-template-columns: 76px minmax(0,1fr); }
  .card-art.card-art-spine img,
  .card-art-stories img { max-width: 53px; }
  .card-copy { padding-left: 14px; padding-right: 14px; }
}


/* 0.10.25a194p14 — barevný hover podle hřbetu jednotlivých svazků. */
.chronicle-card { --volume-hover: 214, 168, 79; }
.chronicle-card[data-chronicle="classes"]      { --volume-hover: 214, 168, 79; }  /* I — zlatá */
.chronicle-card[data-chronicle="world"]        { --volume-hover: 92, 148, 86; }   /* II — zelená */
.chronicle-card[data-chronicle="bestiary"]     { --volume-hover: 205, 207, 202; } /* III — stříbrná */
.chronicle-card[data-chronicle="arena"]        { --volume-hover: 190, 63, 54; }   /* IV — červená */
.chronicle-card[data-chronicle="items"]        { --volume-hover: 69, 126, 181; }  /* V — modrá */
.chronicle-card[data-chronicle="achievements"] { --volume-hover: 139, 86, 181; }  /* VI — fialová */
.chronicle-card[data-chronicle="stories"]      { --volume-hover: 157, 105, 58; }  /* VII — hnědo-měděná */

.chronicle-card:hover {
  border-color: rgba(var(--volume-hover), .82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 22px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(var(--volume-hover), .16),
    0 0 22px rgba(var(--volume-hover), .10);
}

.chronicle-card:hover .card-art.card-art-spine {
  border-right-color: rgba(var(--volume-hover), .40);
}