/* Dobrodružství: výběr knih a mapa jako myšlenková mapa (adventure.js) */

/* Výběr dobrodružství */
.adv-sub { margin: -6px 0 0; text-align: center; color: var(--muted); }
.adv-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.adv-book { display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; border: 0; border-radius: 24px; text-align: left; color: var(--paper); cursor: pointer;
  background: linear-gradient(180deg, #3b1450, #170a26); box-shadow: inset 0 0 0 1.5px rgba(255, 204, 77, .55), 0 18px 40px rgba(0, 0, 0, .5);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s; animation: book-in .5s cubic-bezier(.2, .9, .3, 1.1) backwards; }
.adv-book:nth-child(2) { animation-delay: .08s; }
.adv-book:nth-child(3) { animation-delay: .16s; }
@keyframes book-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@media (hover: hover) {
  .adv-book:not(.soon):hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: inset 0 0 0 2px var(--gold), 0 24px 50px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 204, 77, .25); }
}
.adv-book:not(.soon):active { transform: scale(.98); }
.book-cover { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 46, 136, .55), transparent 60%), radial-gradient(circle at 20% 10%, rgba(255, 204, 77, .35), transparent 45%), linear-gradient(160deg, #6b0f3a, #2a1240); }
.book-faces { display: flex; }
.book-face { width: 88px; height: 88px; margin: 0 -12px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #1c0f38;
  box-shadow: 0 0 0 4px #2a1240, 0 0 0 6px var(--gold), 0 10px 20px rgba(0, 0, 0, .5); }
.book-face:nth-child(2) { position: relative; z-index: 1; transform: translateY(-8px) scale(1.12); }
.book-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.book-face span { font-size: 42px; }
.book-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%); transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite; }
.book-info { display: grid; gap: 6px; align-content: start; padding: 16px 18px 18px; }
.book-info small { font: 800 11px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.book-info b { font: 900 22px/1.1 var(--font-display); }
.book-text { color: #d8c8ea; font-size: 14px; line-height: 1.4; }
.book-bar { height: 8px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.book-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--hot)); }
.book-count { font-size: 12.5px; color: var(--muted); }
.adv-book.soon { cursor: default; filter: grayscale(.85) brightness(.75); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15); }
.book-lock { font-size: 46px; opacity: .7; }

/* Mapa */
.adv-screen { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
.adv-head { position: sticky; top: 0; z-index: 10; flex: 0 0 auto; margin: -8px -16px 0; padding: 8px 16px 14px;
  background: linear-gradient(180deg, rgba(11, 6, 20, .94), rgba(11, 6, 20, .8) 70%, transparent); }
.adv-count { justify-self: end; padding: 7px 9px; border-radius: 999px; font: 800 13px/1 var(--font-display); color: var(--gold); background: rgba(255, 204, 77, .12); }
.adv-world { position: relative; flex: 0 0 auto; width: min(640px, 100%); margin: 0 auto; aspect-ratio: 1 / var(--ratio); }
.adv-paths { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Cestičky: hotová zlatá, otevřená zelená s běžícími čárkami, zamčená tečkovaná */
.adv-paths path { fill: none; stroke-linecap: round; }
.edge-glow { stroke-width: 26; stroke: rgba(255, 255, 255, .04); }
.edge-main { stroke-width: 9; stroke: rgba(255, 255, 255, .2); stroke-dasharray: 2 22; }
.edge.done .edge-glow { stroke: rgba(255, 204, 77, .22); }
.edge.done .edge-main { stroke: var(--gold); stroke-dasharray: none; }
.edge.open .edge-glow { stroke: rgba(125, 255, 178, .2); }
.edge.open .edge-main { stroke: var(--ready); stroke-dasharray: 18 16; animation: edge-flow 1.1s linear infinite; }
@keyframes edge-flow { to { stroke-dashoffset: -34; } }
.edge.soon .edge-main { stroke: rgba(255, 255, 255, .12); }
.edge.drawing .edge-main, .edge.drawing .edge-glow { opacity: 0; }
.adv-paths .edge-draw { stroke: var(--ready); stroke-width: 11; stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* Kapitoly: oblasti mapy s nadpisem a plujícími ikonkami */
.adv-chapter { position: absolute; z-index: 0; border-radius: 48px; border: 1.5px dashed rgba(255, 255, 255, .08);
  background: radial-gradient(ellipse at 50% 50%, var(--ch-glow), transparent 72%); }
.adv-chapter.theme-pink { --ch-glow: rgba(255, 46, 136, .18); }
.adv-chapter.theme-blue { --ch-glow: rgba(91, 143, 249, .2); }
.adv-chapter.soon { filter: grayscale(.7); opacity: .7; }
.ch-icon { position: absolute; font-style: normal; font-size: clamp(20px, 5vw, 30px); opacity: .28; animation: ch-float 7s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ch-float { 50% { transform: translateY(-10px) rotate(6deg); } }
.ch-plate { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; padding: 8px 14px 9px; border-radius: 14px;
  text-align: center; white-space: nowrap; background: linear-gradient(180deg, #3a1450, #1a0a28); box-shadow: inset 0 0 0 1.5px rgba(255, 204, 77, .5), 0 8px 20px rgba(0, 0, 0, .45); }
.ch-plate small { font: 800 10px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.ch-plate b { font: 900 15px/1 var(--font-display); }
.ch-plate em { padding: 3px 7px; border-radius: 999px; font: 800 10px/1 var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .14); }
.ch-plate.soon { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), 0 8px 20px rgba(0, 0, 0, .45); }

/* Uzly */
.adv-node { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; width: 36%; max-width: 160px;
  padding: 0; border: 0; background: none; color: var(--paper); cursor: pointer; animation: an-in .5s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes an-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
.an-pic { position: relative; }
.an-portrait { width: clamp(62px, 18vw, 96px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; transition: transform .2s;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .35), transparent 50%), linear-gradient(165deg, #5a3aa0, #1c0f38);
  box-shadow: 0 0 0 4px #1b1030, 0 0 0 7px #8d88ad, 0 10px 22px rgba(0, 0, 0, .55); }
.an-portrait img { width: 76%; height: auto; }
.an-portrait img.portrait-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.an-portrait span { font-size: clamp(30px, 9vw, 46px); line-height: 1; }
.adv-node.big .an-portrait { width: clamp(76px, 22vw, 116px); }
.adv-node.big .an-pic::before { content: '👑'; position: absolute; left: 50%; top: -20px; z-index: 2; transform: translateX(-50%); font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.an-badge { position: absolute; right: -4px; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 900 13px/1 var(--font-display); background: #2a1a40; box-shadow: 0 0 0 2px #0b0614; }
.an-play { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 5px 11px; border-radius: 999px; font: 900 11px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: #0b2a18; background: var(--ready); box-shadow: 0 0 0 2px #0b0614, 0 0 16px rgba(125, 255, 178, .7); }
.an-label { display: grid; gap: 2px; padding: 5px 10px 6px; border-radius: 12px; text-align: center; background: rgba(11, 6, 20, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.an-label b { font: 800 13.5px/1.1 var(--font-display); white-space: nowrap; }
.an-label small { font-size: 11px; color: var(--muted); }
@media (hover: hover) { .adv-node:hover .an-portrait { transform: scale(1.06); } }
.adv-node:active .an-portrait { transform: scale(.95); }

.adv-node.beaten .an-portrait { box-shadow: 0 0 0 4px #1b1030, 0 0 0 7px var(--gold), 0 0 24px rgba(255, 204, 77, .5); }
.adv-node.beaten .an-badge { background: var(--gold); color: #2a1400; }
.adv-node.open .an-portrait { box-shadow: 0 0 0 4px #1b1030, 0 0 0 7px var(--ready), 0 0 32px rgba(125, 255, 178, .65); animation: an-glow 1.8s ease-in-out infinite; }
@keyframes an-glow { 50% { box-shadow: 0 0 0 4px #1b1030, 0 0 0 9px var(--ready), 0 0 50px rgba(125, 255, 178, .9); } }
.adv-node.open .an-badge { background: var(--ready); color: #0b2a18; }
.adv-node.open .an-label { box-shadow: inset 0 0 0 1.5px rgba(125, 255, 178, .6); }
.adv-node:is(.locked, .soon, .pre-unlock) .an-pic { filter: grayscale(1) brightness(.5); }
.adv-node:is(.locked, .soon) .an-label { opacity: .7; }
.adv-node.pre-unlock .an-play { visibility: hidden; }
.adv-node.pre-unlock .an-portrait { animation: none; }
.adv-node.set-clash .an-portrait { background: radial-gradient(circle at 30% 20%, rgba(37, 99, 235, .7), transparent 60%), linear-gradient(165deg, #142454, #0a0a12); }
.adv-node.start .an-portrait { width: clamp(54px, 15vw, 78px); box-shadow: 0 0 0 4px #1b1030, 0 0 0 7px var(--hot), 0 0 26px rgba(255, 46, 136, .5); }
.adv-node.mystery .an-portrait { background: radial-gradient(circle at 50% 35%, rgba(181, 76, 245, .55), transparent 60%), #160a26;
  box-shadow: 0 0 0 4px #1b1030, 0 0 0 7px rgba(181, 76, 245, .55), 0 0 26px rgba(181, 76, 245, .5); }
.adv-node.mystery .an-portrait span { font: 900 clamp(30px, 8vw, 44px)/1 var(--font-display); color: #e2c8ff; text-shadow: 0 0 14px #b54cf5; animation: mystery 2.4s ease-in-out infinite; }
@keyframes mystery { 50% { opacity: .55; transform: scale(.9); } }
.adv-node.mystery .an-label { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .edge.open .edge-main, .ch-icon, .adv-node.open .an-portrait, .adv-node.mystery .an-portrait span, .book-shine { animation: none; }
}