/* ===== v6: doladění detailů a animace (načítá se poslední) ===== */

/* --- diakritika v Minecraft Ten: svislá poloha znaménka (--mt) se měří v i18n.js od účaří písmene --- */
.dia-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.dia-acute::after, .dia-caron::after, .dia-ring::after { top: var(--mt, -.2em) !important; }
.dia-acute::after { width: .2em; height: .14em; }
.dia-caron::after { width: .4em; height: .16em; }
.dia-ring::after { width: .22em; height: .22em; }

/* --- hero: postupné objevení při načtení --- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero4-content > * { opacity: 0; animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hero4-content > :nth-child(1) { animation-delay: .1s; }
.hero4-content > :nth-child(2) { animation-delay: .22s; }
.hero4-content > :nth-child(3) { animation-delay: .38s; }
.hero4-content > :nth-child(4) { animation-delay: .52s; }
.hero4-media img { animation: hero-kb 40s ease-in-out infinite alternate, herofade 1.6s ease-out; }
@keyframes herofade { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; } }

/* --- souhvězdí: střed hexagonu přesně v bodě dráhy, popisky pod ním --- */
.constellation { width: 560px; height: 620px; margin-top: 30px; }
.constellation .links { width: 560px; height: 620px; }
.constellation::before { top: 280px; }
.constellation .core { top: 280px; }
.constellation .hexskill { top: 280px; margin: -46px 0 0 -60px; width: 120px; gap: 2px; }
.constellation .hexskill .hex { margin-bottom: 6px; }
.constellation .hexskill b { font-size: 13px; line-height: 1.2; }
.constellation .hexskill span { font-size: 11px; line-height: 1.2; }
.core-hex { width: 128px; height: 144px; justify-content: center; padding-bottom: 4px; }
.core-hex i { font-size: 12px; line-height: 1; margin: 0 0 6px; letter-spacing: .24em; padding-left: .24em; }
.core-hex b { font-size: 46px; line-height: .78; padding-top: 2px; }
.constellation .links line { stroke: rgba(255,216,106,.3); stroke-dasharray: 3 6; }

/* animace souhvězdí: hexagony vyskočí jeden po druhém, linky se dokreslí, střed se rozzáří */
.constellation .hexskill { opacity: 0; scale: .6; transition: opacity .5s ease, scale .6s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.25s + var(--i) * 70ms); }
.constellation.in .hexskill { opacity: 1; scale: 1; }
.constellation .links line { stroke-dashoffset: 120; opacity: 0; transition: opacity .6s ease, stroke-dashoffset 1.4s ease; transition-delay: calc(.6s + var(--i) * 70ms); }
.constellation.in .links line { opacity: 1; stroke-dashoffset: 0; animation: dashflow 6s linear 2.4s infinite; }
@keyframes dashflow { to { stroke-dashoffset: -90; } }
.constellation .links circle { opacity: 0; transition: opacity .4s ease 1.4s; }
.constellation.in .links circle { opacity: 1; }
.constellation .core { opacity: 0; scale: .7; transition: opacity .6s ease, scale .8s cubic-bezier(.3,1.5,.5,1); }
.constellation.in .core { opacity: 1; scale: 1; }
.constellation::before { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.constellation .hexskill .hex { transition: transform .35s cubic-bezier(.3,1.6,.5,1), filter .35s; }
.constellation .hexskill:hover .hex { transform: translateY(-4px); filter: drop-shadow(0 8px 18px rgba(255,216,106,.35)); }
.constellation .hexskill .ring { transition: -webkit-mask-position 1.2s steps(16), mask-position 1.2s steps(16); }

/* --- řady grafika | text: text vždy zarovnaný vlevo, sloupce se střídají --- */
.feats { margin-top: 40px; gap: 0; }
.feat { gap: 70px; padding: 54px 0; }
.feat-text { max-width: 400px; }
.feat:nth-child(even) .feat-text { justify-self: end; text-align: left; }
.feat:nth-child(even) .feat-text .kicker { justify-content: flex-start; }
.feat-text h3 { font-size: 30px; }
.feat-art { min-height: 200px; }
.feat-art::before { width: 80%; height: 110%; }
.feat .feat-art > *, .feat .feat-text { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.feat .feat-text { transition-delay: .15s; }
.feat.in .feat-art > *, .feat.in .feat-text { opacity: 1; transform: none; }
.feat.reveal, .feat.reveal.in { opacity: 1; transform: none; }

/* mince: menší, točí se a přejede po ní odlesk */
.art-coin .coin { width: 112px; height: 112px; }
.art-coin { perspective: 600px; }
.art-coin::after { content: ''; position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; transform: translate(-50%, -50%); pointer-events: none;
  -webkit-mask: url('/img/game/coin.png') center / 112px 112px no-repeat; mask: url('/img/game/coin.png') center / 112px 112px no-repeat;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%) -160px 0 / 300% 100% no-repeat; animation: shine 4.5s ease-in-out 1s infinite; }
@keyframes shine { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.feat:not(.in) .art-coin::after { opacity: 0; }

/* batoh: bez perspektivy, sloty se postupně naplní */
.art-pack .pack { width: 104px; height: 104px; }
.art-pack .slots { transform: none; grid-template-columns: repeat(6, 30px); gap: 3px; }
.art-pack .slots i { width: 30px; height: 30px; }
.art-pack .slots i img { opacity: 0; scale: .4; transition: opacity .3s ease, scale .4s cubic-bezier(.3,1.7,.5,1); transition-delay: calc(.4s + var(--i, 0) * 90ms); }
.feat.in .art-pack .slots i img { opacity: 1; scale: 1; }

/* vějíře bez překryvu: karty vedle sebe, mírně natočené, při objevení se rozevřou */
.fan { gap: 12px; }
.fan > * { width: 186px; }
.fan > :nth-child(1) { transform: rotate(-4deg) translateY(10px); }
.fan > :nth-child(2) { transform: translateY(-8px); }
.fan > :nth-child(3) { transform: rotate(4deg) translateY(10px); }
.feat:hover .fan > :nth-child(1) { transform: rotate(-6deg) translateY(6px); }
.feat:hover .fan > :nth-child(3) { transform: rotate(6deg) translateY(6px); }
.feat:not(.in) .fan > * { transform: translateY(30px) rotate(0); }
.fan > :nth-child(2) { transition-delay: .08s; } .fan > :nth-child(3) { transition-delay: .16s; }
.qcard { padding: 12px 14px 11px; }
.qtop { gap: 8px; margin-bottom: 10px; }
.qtop img { width: 22px; height: 22px; }
.qtop b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qmeta { font-size: 11px; }
.qbar i { transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .5s; }
.feat.in .qbar i { transform: scaleX(1); }
.fan.mini > * { width: 160px; min-height: 150px; }
.fan.mini .ecard { width: 214px; }
.fan.mini .ecard .p1 { width: 52px; } .fan.mini .ecard .p2 { width: 36px; right: 58px; } .fan.mini .ecard .p3 { width: 32px; }
.fan.mini .ecard .small { max-width: 130px; }
.ecard .title, .gcard .title { font-size: 17px; }
.gcard .state { font-size: 10px; letter-spacing: .08em; }

/* teleport: domov uprostřed jemně dýchá */
.tpcard { width: 132px; }
.tpcard.home { width: 150px; animation: homeglow 3s ease-in-out infinite; }
@keyframes homeglow { 0%, 100% { box-shadow: 0 0 22px rgba(232,197,106,.18), inset 0 1px 0 rgba(255,255,255,.1); } 50% { box-shadow: 0 0 40px rgba(232,197,106,.38), inset 0 1px 0 rgba(255,255,255,.1); } }
.tpcard img { width: 34px; height: 34px; }
.tpcard img.bed { width: 52px; height: 26px; transform: none; margin: 4px 0 10px; }

/* level-up: jen jeden titulek, ornamenty blíž, číslo naskočí */
.lvup-wrap { margin-top: 30px; }
.lvup { gap: 22px; padding: 26px 0 22px; }
.lvup .orn { width: 120px; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.8,.2,1) .2s; }
.lvup .orn.l { transform-origin: right; } .lvup .orn.r { transform-origin: left; }
.lvup-wrap.in .lvup .orn { transform: scaleX(1); }
.lvup-num { font-size: 56px; scale: .5; opacity: 0; transition: scale .7s cubic-bezier(.3,1.7,.5,1) .35s, opacity .3s ease .35s; }
.lvup-wrap.in .lvup-num { scale: 1; opacity: 1; }
.lvup-label { font-size: 14px; }

/* mapa: menší rám, pomalé přiblížení */
.mapframe { max-width: 820px; }
.mapframe video { transition: transform 8s ease; }
.scene-map:hover .mapframe video { transform: scale(1.04); }
.scene-map { margin-top: 30px; }

/* žebříček: užší, čísla v Noto (čitelné mezery tisíců), řádky naskočí postupně */
.lb { max-width: 860px; margin: 0 auto; }
.lb-row { grid-template-columns: 40px 40px 1fr 90px 120px; }
.lb-row .coins b { font-family: var(--body); font-weight: 600; font-size: 16px; }
.lb-row .lvl b { font-size: 22px; }
.lb-row { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 60ms); }
.lb.in .lb-row { opacity: 1; transform: none; }

/* tlačítka a odkazy: plynulý stav pod myší */
.btn { transition: background .2s, transform .15s, border-color .2s, box-shadow .25s, filter .2s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary:hover, .btn.gold:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
  .constellation { width: 100%; height: auto; margin-top: 10px; }
  .constellation .hexskill { margin: 0; width: auto; }
  .feat { gap: 24px; padding: 28px 0; }
  .feat:nth-child(even) .feat-text { justify-self: start; }
  .fan { gap: 8px; } .fan > * { width: 30%; min-width: 0; } .fan.mini .ecard { width: 36%; }
  .qmeta { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero4-content > *, .constellation .hexskill, .constellation .core, .feat .feat-art > *, .feat .feat-text, .lb-row { opacity: 1 !important; transform: none !important; scale: 1 !important; }
}

/* malé popisky karet v Noto (Minecraft Ten jen na velké titulky – v malé velikosti se diakritika slévá) */
.tpcard b, .qtop b, .ecard .title, .gcard .title { font-family: var(--body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tpcard b { font-size: 14px; } .qtop b { font-size: 12px; } .ecard .title, .gcard .title { font-size: 15px; }
.mapframe { max-width: 760px; }
/* obrázky se přimknou ke středu stránky (k textu), ne k okraji */
.feat:nth-child(odd) .feat-art { justify-content: flex-end; padding-right: 10px; }
.feat:nth-child(even) .feat-art { justify-content: flex-start; padding-left: 10px; }
.feat:nth-child(odd) .feat-art::before { left: 70%; } .feat:nth-child(even) .feat-art::before { left: 30%; }
@media (max-width: 900px) { .feat .feat-art { justify-content: center !important; padding: 0 !important; } .feat .feat-art::before { left: 50% !important; } }
/* vrácení: obrázek uprostřed svého sloupce (záře sedí na obrázku) */
.feat:nth-child(odd) .feat-art, .feat:nth-child(even) .feat-art { justify-content: center; padding: 0; }
.feat:nth-child(odd) .feat-art::before, .feat:nth-child(even) .feat-art::before { left: 50%; }
/* titulky pod scénami v Noto – čitelná diakritika i v malé velikosti */
.scene-cap b { font-family: var(--body); font-weight: 600; font-size: 17px; letter-spacing: .08em; }
@media (max-width: 760px) {
  main { overflow-x: clip; }
  .fan.mini > * { width: 29%; min-height: 0; } .fan.mini .ecard { width: 38%; }
  .fan.mini .ecard .p2, .fan.mini .ecard .p3 { display: none; } .fan.mini .ecard .p1 { width: 34px; }
  .lvup { gap: 12px; } .lvup .orn { width: 36px; }
  .lvup-rew { white-space: nowrap; font-size: 12px; }
}
@media (max-width: 760px) {
  .feat { grid-template-columns: minmax(0, 1fr); }
  .feat-art, .fan, .tpcards { min-width: 0; max-width: 100%; }
  .fan > * { flex: 1 1 0; width: auto; min-width: 0; }
  .fan.mini .ecard { flex: 1.3 1 0; width: auto; }
  .tpcards { gap: 8px; } .tpcard, .tpcard.home { width: auto; flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }
  .nav-right .pill.status { display: none; }
}