@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;font-family:Georgia,'Times New Roman',serif;background:#08060c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#08060c}button,a{-webkit-tap-highlight-color:transparent}.stage{position:relative;width:100%;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;background:#0c0911}.scene{position:absolute;inset:0;background-image:url('assets/images/pozadi.webp');background-size:cover;background-position:center center;pointer-events:none}.mono{filter:grayscale(1) brightness(.65)}.color{opacity:0;transition:opacity .9s ease;will-change:opacity}.left-color{clip-path:inset(0 50% 0 0)}.right-color{clip-path:inset(0 0 0 50%)}.stage[data-active="life"] .left-color,.stage[data-active="death"] .right-color{opacity:1}.screen-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,3,4,.20) 0%,transparent 26%,transparent 74%,rgba(4,3,8,.24) 100%);pointer-events:none}.portrait-link{position:absolute;z-index:1;top:0;bottom:0;width:50%;cursor:pointer}.portrait-left{left:0}.portrait-right{right:0}.panel{position:absolute;z-index:3;top:14%;width:clamp(215px,22.3vw,355px);display:flex;flex-direction:column;gap:8px;filter:grayscale(1);opacity:.8;transition:filter .75s,opacity .75s}.panel.life{left:3.7%}.panel.death{right:3.7%}.stage[data-active="life"] .panel.life,.stage[data-active="death"] .panel.death{filter:grayscale(0);opacity:1}.panel-head{text-align:center;min-height:124px;padding:7px 8px 12px;position:relative;border:1px solid currentColor;background:linear-gradient(160deg,#0e0906e8,#140e0bd9);clip-path:polygon(5% 0,95% 0,100% 10%,100% 90%,95% 100%,5% 100%,0 90%,0 10%)}.life{color:#f0c37c}.death{color:#d4a7f0}.death .panel-head{background:linear-gradient(160deg,#120d1de8,#0c0717de)}.panel-head h2{font-family:Cinzel,Georgia,serif;font-weight:500;line-height:1.12;letter-spacing:.025em;font-size:clamp(20px,2.0vw,32px);margin:5px 0 0;text-shadow:0 1px 9px #000}.sigil{font-size:29px;display:block;line-height:1}.panel nav{display:grid;gap:7px}.nav-item{height:clamp(50px,6.0vh,72px);display:flex;align-items:center;gap:14px;padding:0 12%;text-decoration:none;color:inherit;background:linear-gradient(180deg,#1a110cF0,#090606E8);border:1px solid currentColor;clip-path:polygon(5% 0,95% 0,100% 20%,100% 80%,95% 100%,5% 100%,0 80%,0 20%);font-family:Cinzel,Georgia,serif;font-size:clamp(15px,1.25vw,21px);letter-spacing:.035em;text-shadow:0 1px 4px #000;transition:background .25s,filter .25s,transform .25s}.death .nav-item{background:linear-gradient(180deg,#1b1025ed,#0b0714ee)}.nav-item:hover,.nav-item:focus-visible{background:linear-gradient(180deg,#4b3420f0,#20130af5);filter:drop-shadow(0 0 8px currentColor);transform:scale(1.025);outline:none}.death .nav-item:hover,.death .nav-item:focus-visible{background:linear-gradient(180deg,#382449ed,#160b26f5)}.nav-icon{font-family:Georgia,serif;font-size:1.45em;width:29px;text-align:center}.controls{position:absolute;z-index:5;right:2.2%;top:2%;display:flex;gap:5px;align-items:center;color:#ebd0a1}.controls button{cursor:pointer;border:1px solid #b99a69;background:#0b0810e9;color:inherit;min-height:39px;font-family:Cinzel,Georgia,serif;font-size:16px}.controls>button{width:44px;font-size:23px}.controls button:hover,.controls button:focus-visible{background:#39271d;outline:1px solid #f4d9aa}.languages{display:flex;align-items:center;gap:6px;padding:0 7px;border:1px solid #b99a69;background:#0b0810e9}.languages button{border:0;background:none;min-width:32px;padding:5px 0;opacity:.55}.languages button.active{opacity:1;color:#ffe2b5}.toast{position:absolute;z-index:8;left:50%;bottom:1.5%;transform:translateX(-50%);max-width:85vw;background:#0d0915ec;border:1px solid #b28c6a;color:#ead8c2;padding:9px 14px;opacity:0;pointer-events:none;transition:opacity .2s;text-align:center}.toast.show{opacity:1}@media(max-width:850px){.scene{background-position:center center}.panel{top:10%;width:28vw;min-width:125px}.panel.life{left:1%}.panel.death{right:1%}.panel-head{min-height:86px}.panel-head h2{font-size:clamp(13px,2.7vw,21px)}.sigil{font-size:21px}.nav-item{padding:0 5%;gap:4px;font-size:clamp(10px,1.8vw,15px);height:45px}.nav-icon{font-size:16px;width:18px}.controls{top:1%;right:1%}}@media(max-width:530px){.stage{min-height:740px}.scene{background-size:auto 100%;background-position:center}.panel{top:9%;width:39vw;min-width:0}.panel-head{min-height:72px;padding:4px}.panel-head h2{font-size:13px}.sigil{font-size:16px}.nav-item{height:37px;font-size:10px;letter-spacing:0;padding:0 6px;gap:4px}.nav-icon{font-size:13px;width:15px}.controls button{min-height:30px;font-size:12px}.controls>button{width:33px;font-size:17px}.languages{gap:2px;padding:0 3px}.languages button{min-width:25px}.screen-shade{background:linear-gradient(90deg,#07050a88,transparent 43%,transparent 57%,#07050a88)}}@media(prefers-reduced-motion:reduce){.color,.panel,.nav-item{transition:none}}
/* Náhled 06: celý schválený obraz včetně citátu je vždy viditelný. */
html,body{height:100%;overflow:hidden}
.stage{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.scene{background-size:contain;background-repeat:no-repeat;background-position:center center;background-color:#08060c}
/* Navigace se přizpůsobuje výšce obrazovky, bez změny fontu. */
.panel{top:clamp(46px,9.5dvh,110px);gap:clamp(3px,.7dvh,8px);width:clamp(180px,20.5vw,340px)}
.panel-head{min-height:0;height:clamp(66px,13dvh,124px);padding:clamp(3px,.7dvh,7px) 7px;display:flex;flex-direction:column;justify-content:center}
.panel-head h2{font-size:clamp(15px,min(1.8vw,3.1dvh),29px);margin:2px 0 0}
.sigil{font-size:clamp(16px,3.2dvh,29px)}
.panel nav{gap:clamp(3px,.7dvh,7px)}
.nav-item{height:clamp(28px,6.3dvh,66px);font-size:clamp(11px,min(1.2vw,2.4dvh),20px)}
@media(max-width:850px){.panel{top:clamp(38px,9dvh,90px);width:27vw;min-width:115px}.panel-head{height:clamp(58px,11dvh,90px)}.nav-item{height:clamp(27px,5.7dvh,48px);font-size:clamp(9px,1.6vw,15px)}}
@media(max-width:530px){.stage{min-height:0;height:100dvh}.scene{background-size:contain;background-position:center center}.panel{top:clamp(35px,8dvh,65px);width:39vw;min-width:0}.panel-head{height:clamp(48px,10dvh,72px)}.panel-head h2{font-size:clamp(10px,2.7vw,13px)}.nav-item{height:clamp(23px,5dvh,37px);font-size:clamp(8px,2vw,10px)}}
@media(max-height:570px) and (min-width:531px){.panel{top:30px}.panel-head{height:57px}.sigil{font-size:15px}.panel-head h2{font-size:14px}.nav-item{height:clamp(23px,5.5dvh,31px)}.controls{top:5px}}

/* Náhled 08: plná šířka i výška bez ořezu citátu; žádné postranní pruhy. */
.scene{background-size:100% 100%;background-position:center center;background-repeat:no-repeat}
@media(max-width:530px){.scene{background-size:100% 100%}}

/* Náhled 10 – schválená navigace: bez emotikonů, po krajích, nízké lišty. */
.panel{top:clamp(100px,21dvh,190px);width:clamp(142px,13vw,166px);gap:clamp(9px,1.5dvh,16px);filter:grayscale(1);opacity:.85}
.panel.life{left:clamp(10px,2vw,34px)}.panel.death{right:clamp(10px,2vw,34px)}
.panel-head{height:auto;min-height:0;padding:0 2px 2px;border:0;clip-path:none;background:none!important}
.panel-head h2{font-family:Cinzel,Georgia,serif;font-size:clamp(12px,1.12vw,17px);font-weight:500;line-height:1.3;margin:0;letter-spacing:.02em}
.panel nav{gap:clamp(9px,1.8dvh,16px)}
.nav-item{height:30px;min-height:30px;justify-content:center;padding:0 5px;gap:0;text-align:center;clip-path:none;border:1px solid #9e7848;border-radius:2px;background:rgba(31,23,17,.89);font-size:clamp(10px,0.93vw,13px);font-weight:400;letter-spacing:.06em;transform:none!important;filter:none!important;position:relative;box-shadow:inset 0 0 10px #0005}
.death .nav-item{border-color:#83689a;background:rgba(30,23,40,.90)}
.nav-item::after{content:'';position:absolute;bottom:4px;left:28%;right:28%;height:1px;background:currentColor;opacity:0;box-shadow:0 0 6px currentColor;transition:opacity .25s}
.nav-item:hover,.nav-item:focus-visible{background:rgba(69,47,28,.95);border-color:#f5dbad;box-shadow:0 0 10px #d3a15a77,inset 0 0 8px #c89a4d30;outline:none;color:#ffe5ad}
.death .nav-item:hover,.death .nav-item:focus-visible{background:rgba(54,34,72,.95);border-color:#e6c6ff;box-shadow:0 0 10px #b991e777,inset 0 0 8px #b991e733;color:#f1dbff}
.nav-item:hover::after,.nav-item:focus-visible::after{opacity:.8}
.nav-icon,.sigil{display:none!important}
.controls{top:clamp(8px,2dvh,18px);right:clamp(10px,2vw,30px);gap:10px}
.controls>button{width:40px;min-height:36px;display:flex;align-items:center;justify-content:center;border-color:#846b97;border-radius:3px;color:#d6c3e5;background:#0d0a14df}
.controls>button:hover{background:#2a1c38}
#speaker{display:block}.muted-cross{display:none}#mute[aria-pressed="true"] .sound-wave{display:none}#mute[aria-pressed="true"] .muted-cross{display:block}
.languages{padding:0 3px;gap:3px;border:0;background:none}
.languages button{border:1px solid #695975;border-radius:3px;min-width:37px;min-height:36px;padding:5px 6px;background:#0d0a14df;opacity:1;color:#bbaec7;font-size:13px}
.languages button.active{border-color:#b99764;background:#382b21;color:#f0d5a0}
.languages>span{color:#93849a}
@media(max-width:850px){.panel{width:clamp(112px,19vw,156px);top:clamp(85px,19dvh,160px)}.panel-head h2{font-size:clamp(10px,1.65vw,14px)}.nav-item{font-size:clamp(9px,1.5vw,12px);height:29px;min-height:29px}}
@media(max-width:530px){.panel{width:clamp(94px,29vw,130px);top:clamp(90px,18dvh,150px)}.panel.life{left:5px}.panel.death{right:5px}.panel-head h2{font-size:10px}.panel nav{gap:clamp(7px,1.4dvh,12px)}.nav-item{font-size:9px;letter-spacing:0;height:27px;min-height:27px}.controls{right:5px;top:5px;gap:4px}.controls>button{min-height:30px;width:31px}.languages button{min-height:30px;min-width:28px;padding:3px;font-size:11px}}
@media(max-height:600px){.panel{top:clamp(44px,13dvh,85px)}.panel nav{gap:clamp(4px,1.4dvh,9px)}.panel-head h2{font-size:clamp(10px,1.2vw,13px)}.nav-item{height:clamp(22px,5dvh,30px);min-height:0}}

/* Náhled 11: schválená malovaná navigace, zrcadlové rozložení. */
.panel{width:195px;max-width:calc(50vw - 12px);gap:12px;filter:none;opacity:1}
.panel nav{gap:16px}
.panel-head h2{font-size:clamp(12px,1.1vw,17px)}
.nav-item,.death .nav-item{display:flex;width:100%;height:42px;min-height:42px;padding:0;border:0;border-radius:3px;clip-path:none;background-color:transparent;background-position:center;background-size:100% 100%;background-repeat:no-repeat;box-shadow:none;transition:filter .25s,transform .25s;overflow:hidden}
.nav-item:nth-child(1){background-image:url('assets/images/nav_life_1.webp')}
.nav-item:nth-child(2){background-image:url('assets/images/nav_life_2.webp')}
.nav-item:nth-child(3){background-image:url('assets/images/nav_life_3.webp')}
.nav-item:nth-child(4){background-image:url('assets/images/nav_life_4.webp')}
.nav-item:nth-child(5){background-image:url('assets/images/nav_life_5.webp')}
.death .nav-item:nth-child(1){background-image:url('assets/images/nav_death_1.webp')}
.death .nav-item:nth-child(2){background-image:url('assets/images/nav_death_2.webp')}
.death .nav-item:nth-child(3){background-image:url('assets/images/nav_death_3.webp')}
.death .nav-item:nth-child(4){background-image:url('assets/images/nav_death_4.webp')}
.death .nav-item:nth-child(5){background-image:url('assets/images/nav_death_5.webp')}
.nav-item .nav-text{opacity:0;pointer-events:none}
.nav-item::after{display:none}
.nav-item:hover,.nav-item:focus-visible,.death .nav-item:hover,.death .nav-item:focus-visible{background-color:transparent;box-shadow:0 0 12px #cba26566;filter:brightness(1.18) drop-shadow(0 0 4px currentColor)!important;transform:scale(1.025)!important}
.death .nav-item:hover,.death .nav-item:focus-visible{box-shadow:0 0 12px #a786c966}
/* EN: zakrytí českého nápisu a živý anglický překlad, ornamenty zůstávají viditelné. */
html[lang=en] .nav-item::before{content:'';position:absolute;top:4px;bottom:4px;left:37%;right:3%;background:linear-gradient(90deg,transparent,#1a100b 15%,#1a100b 88%,transparent);z-index:0}
html[lang=en] .death .nav-item::before{left:3%;right:37%;background:linear-gradient(90deg,transparent,#1b1424 15%,#1b1424 88%,transparent)}
html[lang=en] .nav-item .nav-text{opacity:1;position:relative;z-index:1;margin-left:37%;width:60%;text-align:center;font-size:clamp(9px,.83vw,12px);color:#f1ce97;letter-spacing:0}
html[lang=en] .death .nav-item .nav-text{margin-left:3%;width:60%;color:#ddc3ec}
@media(max-width:850px){.panel{width:min(195px,23vw)}.panel nav{gap:clamp(7px,1.5dvh,16px)}.nav-item,.death .nav-item{height:clamp(26px,4.4dvh,42px);min-height:0}}
@media(max-width:530px){.panel{width:clamp(95px,29vw,150px)}.panel nav{gap:clamp(6px,1.2dvh,12px)}.nav-item,.death .nav-item{height:clamp(24px,4.1dvh,36px)}html[lang=en] .nav-item .nav-text{font-size:8px}}

/* Náhled 12: keep baked-in navigation artwork on hover and keyboard focus. */
.nav-item:nth-child(1):is(:hover,:focus-visible){background-image:url('assets/images/nav_life_1.webp')!important}
.nav-item:nth-child(2):is(:hover,:focus-visible){background-image:url('assets/images/nav_life_2.webp')!important}
.nav-item:nth-child(3):is(:hover,:focus-visible){background-image:url('assets/images/nav_life_3.webp')!important}
.nav-item:nth-child(4):is(:hover,:focus-visible){background-image:url('assets/images/nav_life_4.webp')!important}
.nav-item:nth-child(5):is(:hover,:focus-visible){background-image:url('assets/images/nav_life_5.webp')!important}
.death .nav-item:nth-child(1):is(:hover,:focus-visible){background-image:url('assets/images/nav_death_1.webp')!important}
.death .nav-item:nth-child(2):is(:hover,:focus-visible){background-image:url('assets/images/nav_death_2.webp')!important}
.death .nav-item:nth-child(3):is(:hover,:focus-visible){background-image:url('assets/images/nav_death_3.webp')!important}
.death .nav-item:nth-child(4):is(:hover,:focus-visible){background-image:url('assets/images/nav_death_4.webp')!important}
.death .nav-item:nth-child(5):is(:hover,:focus-visible){background-image:url('assets/images/nav_death_5.webp')!important}

/* Náhled 13: lehce zvětšené obě malované navigace. */
.panel{width:215px;max-width:calc(50vw - 12px)}
.nav-item,.death .nav-item{height:46px;min-height:46px}
@media(max-width:850px){.panel{width:min(215px,24vw)}.nav-item,.death .nav-item{height:clamp(28px,4.8dvh,46px);min-height:0}}
@media(max-width:530px){.panel{width:clamp(100px,30vw,160px)}.nav-item,.death .nav-item{height:clamp(25px,4.4dvh,39px);min-height:0}}
@media(max-height:600px){.panel nav{gap:clamp(4px,1dvh,9px)}.nav-item,.death .nav-item{height:clamp(23px,5.4dvh,35px);min-height:0}}

/* Náhled 14: artwork is an independent IMG layer, NEVER a CSS background.
   This prevents legacy :hover background shorthand from erasing the baked-in labels. */
.nav-item,.death .nav-item,
.nav-item:hover,.nav-item:focus-visible,
.death .nav-item:hover,.death .nav-item:focus-visible {
  position:relative; background-image:none!important; background-color:transparent!important;
}
.nav-item .nav-art {
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  display:block;z-index:0;pointer-events:none;user-select:none;
}
.nav-item:hover .nav-art,.nav-item:focus-visible .nav-art {filter:brightness(1.13)}
html[lang=en] .nav-item::before{z-index:1}
html[lang=en] .nav-item .nav-text{z-index:2}

/* NAHLED 15: final single source of truth for navigation hover.
   No scaling, movement, background swapping, hiding, or reflow.
   Light effect is an overlay on top of the permanent artwork. */
.panel .nav-item,
.panel .nav-item:hover,
.panel .nav-item:focus-visible,
.panel.death .nav-item,
.panel.death .nav-item:hover,
.panel.death .nav-item:focus-visible {
  position:relative!important;
  transform:none!important;
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  filter:none!important;
  opacity:1!important;
  border:0!important;
  padding:0!important;
  box-shadow:none!important;
  outline:none;
  transition:none!important;
  isolation:isolate;
}
.panel .nav-item .nav-art,
.panel .nav-item:hover .nav-art,
.panel .nav-item:focus-visible .nav-art {
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  width:100%;height:100%;object-fit:fill;
  pointer-events:none;
}
.panel .nav-item::after,
.panel .nav-item:hover::after,
.panel .nav-item:focus-visible::after {
  content:''!important;
  display:block!important;
  position:absolute!important;
  z-index:1;
  inset:0!important;
  border-radius:3px;
  background:rgba(255,215,148,.055)!important;
  box-shadow:inset 0 0 12px rgba(255,201,110,.2),0 0 12px rgba(224,170,86,.45)!important;
  opacity:0!important;
  pointer-events:none;
  transition:opacity .25s ease!important;
}
.panel.death .nav-item::after,
.panel.death .nav-item:hover::after,
.panel.death .nav-item:focus-visible::after {
  background:rgba(212,170,255,.055)!important;
  box-shadow:inset 0 0 12px rgba(198,147,245,.2),0 0 12px rgba(181,130,239,.48)!important;
}
.panel .nav-item:hover::after,
.panel .nav-item:focus-visible::after {opacity:1!important}
/* The overlay cannot cover the actual text, including EN translations. */
html[lang=en] .panel .nav-item::before {z-index:2}
html[lang=en] .panel .nav-item .nav-text {z-index:3}
@media(prefers-reduced-motion:reduce){.panel .nav-item::after{transition:none!important}}

/* NAHLED 17: editable quote, with baked-in original removed from the background. */

.landing-quote{position:absolute;z-index:2;left:16%;right:16%;bottom:1.8%;text-align:center;pointer-events:none;font-family:'Cinzel',Georgia,serif;font-weight:400;font-style:normal;font-size:clamp(10px,1.12vw,18px);line-height:1.5;letter-spacing:.025em;color:#ded0c5;text-shadow:0 1px 5px #000,0 0 9px #9873a244;}
.landing-quote .quote-cz{background:linear-gradient(90deg,#d4ac77 5%,#f0dfc2 45%,#c7a7df 95%);background-clip:text;-webkit-background-clip:text;color:transparent;}
.landing-quote .quote-en{display:none;background:linear-gradient(90deg,#d4ac77,#f0dfc2,#c7a7df);background-clip:text;-webkit-background-clip:text;color:transparent;}
html[lang=en] .landing-quote .quote-cz{display:none}
html[lang=en] .landing-quote .quote-en{display:inline}
@media(max-width:850px){.landing-quote{left:12%;right:12%;bottom:1.5%;font-size:clamp(9px,1.3vw,13px)}}
@media(max-width:530px){.landing-quote{left:5%;right:5%;bottom:2%;font-size:clamp(9px,2vw,12px);line-height:1.35}.quote-break{display:none}}

/* NAHLED 18: navigation colors depend exclusively on hovered half, not on language. */
.stage .panel.life,.stage .panel.death {filter:grayscale(1)!important;opacity:.80!important;transition:filter .55s ease,opacity .55s ease!important}
.stage[data-active="life"] .panel.life,.stage[data-active="death"] .panel.death {filter:grayscale(0)!important;opacity:1!important}
/* Do not scale or swap artwork: version 15 hover remains authoritative. */
.stage .panel .nav-item,.stage .panel .nav-item:hover,.stage .panel .nav-item:focus-visible {transform:none!important}
/* Match original baked-in navigation type size for the translated overlay. */
html[lang="en"] .panel .nav-item .nav-text {font-family:Cinzel,Georgia,serif;font-weight:400;font-size:clamp(12px,1.12vw,16px)!important;line-height:1.05;letter-spacing:-.035em!important;white-space:nowrap}
html[lang="en"] .panel .nav-item[data-en="CHARACTERS"] .nav-text {font-size:clamp(11px,1.02vw,15px)!important}
@media(max-width:850px){html[lang="en"] .panel .nav-item .nav-text{font-size:clamp(9px,1.65vw,14px)!important}html[lang="en"] .panel .nav-item[data-en="CHARACTERS"] .nav-text{font-size:clamp(8px,1.45vw,13px)!important}}
@media(max-width:530px){html[lang="en"] .panel .nav-item .nav-text{font-size:clamp(8px,2.3vw,11px)!important}html[lang="en"] .panel .nav-item[data-en="CHARACTERS"] .nav-text{font-size:clamp(7px,2vw,10px)!important}}
/* Explicit quote language selection, independent of earlier CSS. */
.landing-quote .quote-cz,.landing-quote .quote-en {display:none!important}
html[lang="cs"] .landing-quote .quote-cz,html[lang="cz"] .landing-quote .quote-cz {display:inline!important}
html[lang="en"] .landing-quote .quote-en {display:inline!important}

/* NAHLED 19: English labels have their own reserved text zone.
   The opaque mask hides the original Czech lettering without touching the painted icon.
   No movement, scale or changes to the approved hover effect. */
html[lang="en"] .panel .nav-item::before {
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:3px!important;
  bottom:3px!important;
  left:34%!important;
  right:1.5%!important;
  z-index:2!important;
  border-radius:1px;
  background:linear-gradient(90deg,#21170f 0%,#21170f 94%,#21170f)!important;
  pointer-events:none;
}
html[lang="en"] .panel.death .nav-item::before {
  left:1.5%!important;
  right:34%!important;
  background:#211a2b!important;
}
html[lang="en"] .panel .nav-item .nav-text,
html[lang="en"] .panel.death .nav-item .nav-text {
  position:absolute!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  top:0!important;
  bottom:0!important;
  height:100%!important;
  left:34%!important;
  right:1.5%!important;
  width:auto!important;
  margin:0!important;
  padding:0 2px!important;
  overflow:hidden!important;
  text-align:center!important;
  white-space:nowrap!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  font-size:clamp(11px,1.05vw,15px)!important;
}
html[lang="en"] .panel.death .nav-item .nav-text {
  left:1.5%!important;
  right:34%!important;
}
html[lang="en"] .panel .nav-item[data-en="CHARACTERS"] .nav-text {
  font-size:clamp(10px,.95vw,14px)!important;
}
@media(max-width:850px){
  html[lang="en"] .panel .nav-item .nav-text{font-size:clamp(8px,1.4vw,12px)!important}
  html[lang="en"] .panel .nav-item[data-en="CHARACTERS"] .nav-text{font-size:clamp(7px,1.25vw,11px)!important}
}
@media(max-width:530px){
  html[lang="en"] .panel .nav-item .nav-text{font-size:clamp(7px,2.1vw,10px)!important}
  html[lang="en"] .panel .nav-item[data-en="CHARACTERS"] .nav-text{font-size:clamp(6px,1.8vw,9px)!important}
}

/* Jednotna typografie webu: pismo pouzite v listach */
html,body,button,a,input,textarea,select,.brand-title,.chapter-name,.story h1,.reading h1,.byline,.chapter-text,.notice,.eyebrow{font-family:Cinzel,Georgia,serif!important;}

/* 1.1: Schvalena ilustrace a ciste HTML titulky, zadny text v obrazku. */
.landing-title{position:absolute;z-index:3;left:24%;right:24%;bottom:17%;pointer-events:none;text-align:center;font-family:Cinzel,Georgia,serif!important;color:#f4dfb5;text-shadow:0 3px 9px #000,0 0 25px #000,0 0 15px #bb914b88;letter-spacing:.14em;line-height:1.2}
.landing-title .title-cz,.landing-title .title-en{display:flex;flex-direction:column;gap:.12em}
.landing-title .title-en{display:none}
.landing-title span span:first-child{font-size:clamp(22px,3.1vw,57px);font-weight:600}
.landing-title span span:last-child{font-size:clamp(12px,1.6vw,28px);font-weight:500;letter-spacing:.11em}
html[lang=en] .landing-title .title-cz{display:none}
html[lang=en] .landing-title .title-en{display:flex}
.landing-quote{left:19%;right:19%;bottom:2%;padding:clamp(9px,1.2vw,19px) clamp(12px,2vw,30px);border:1px solid rgba(172,167,185,.63);border-left-color:#d4ac77;border-right-color:#8296c2;border-radius:6px;background:linear-gradient(90deg,rgba(28,21,16,.85),rgba(15,20,32,.88));box-shadow:0 7px 28px #0008,inset 0 1px #ffffff17;backdrop-filter:blur(9px);font-size:clamp(10px,1vw,16px)}
@media(max-width:850px){.landing-title{left:19%;right:19%;bottom:19%}.landing-quote{left:10%;right:10%;bottom:2%;font-size:clamp(9px,1.3vw,13px)}}
@media(max-width:530px){.landing-title{left:6%;right:6%;bottom:23%}.landing-title span span:first-child{font-size:clamp(18px,5vw,30px)}.landing-title span span:last-child{font-size:clamp(10px,3vw,16px)}.landing-quote{left:3%;right:3%;bottom:2%;font-size:clamp(9px,2.2vw,12px);padding:9px 10px}}
/* 1.1: Smrt prechazi do chladne modrofialove, zachovana kreslena navigace. */
.death{color:#c0cee8}
.panel.death .nav-item::after,.panel.death .nav-item:hover::after,.panel.death .nav-item:focus-visible::after{background:rgba(116,145,207,.08)!important;box-shadow:inset 0 0 12px rgba(119,153,217,.27),0 0 13px rgba(96,129,196,.55)!important}
html[lang=en] .panel.death .nav-item::before{background:#20283b!important}

/* 1.1.1: Jmena ve stejnych ramcich a chladnejsi modra navigace smrti */
.panel .panel-head{width:100%;height:46px;min-height:46px;padding:3px 8px;margin:0;border:1px solid #bc955e;border-radius:3px;clip-path:none;background:linear-gradient(125deg,#392816f2,#15100df7)!important;box-shadow:inset 0 0 12px #dba85630,0 3px 12px #0009;display:flex;align-items:center;justify-content:center}
.panel .panel-head h2{margin:0;font-size:clamp(12px,1.05vw,17px);line-height:1.18;text-align:center;color:#f2d4a2;text-shadow:0 1px 5px #000}
.panel.death .panel-head{border-color:#8298bd;background:linear-gradient(125deg,#273952f5,#0f192bf7)!important;box-shadow:inset 0 0 14px #7da2d338,0 3px 12px #0009}
.panel.death .panel-head h2{color:#d4e2f5;text-shadow:0 1px 5px #000,0 0 10px #749ac766}
.panel.death .nav-item .nav-art,.panel.death .nav-item:hover .nav-art,.panel.death .nav-item:focus-visible .nav-art{filter:hue-rotate(35deg) saturate(.77) brightness(1.04)!important}
.panel.death .nav-item::after,.panel.death .nav-item:hover::after,.panel.death .nav-item:focus-visible::after{background:#6597d414!important;box-shadow:inset 0 0 12px #77a2dc4d,0 0 13px #5785c280!important}
html[lang=en] .panel.death .nav-item::before{background:linear-gradient(90deg,transparent,#1a283c 15%,#1a283c 88%,transparent)!important}
html[lang=en] .panel.death .nav-item .nav-text{color:#d0e0f6!important}
@media(max-width:850px){.panel .panel-head{height:42px;min-height:42px}.panel .panel-head h2{font-size:clamp(10px,1.55vw,14px)}}
@media(max-width:530px){.panel .panel-head{height:38px;min-height:38px;padding:2px}.panel .panel-head h2{font-size:clamp(9px,2.4vw,12px)}}

/* 1.1.3 – pravé obrázky fyzicky přebarveny; interakce modré v CZ i EN */
.panel.death{color:#b6cee9!important}.panel.death .nav-item{color:#c6daf0!important}
.panel.death .nav-item::after,.panel.death .nav-item:hover::after,.panel.death .nav-item:focus-visible::after{background:rgba(112,162,211,.08)!important;box-shadow:inset 0 0 12px rgba(125,171,219,.28),0 0 13px rgba(97,147,202,.55)!important}
html[lang=en] .panel.death .nav-item::before{background:#172437!important}
html[lang=en] .panel.death .nav-item .nav-text{color:#d4e5f8!important}
.panel.death .nav-item .nav-art{filter:none!important}
.panel .nav-item.nav-name .nav-text,html[lang=en] .panel .nav-item.nav-name .nav-text{display:flex!important;flex-direction:column!important;position:absolute!important;z-index:4!important;top:0!important;bottom:0!important;height:100%!important;margin:0!important;padding:0 2px!important;opacity:1!important;visibility:visible!important;align-items:center!important;justify-content:center!important;font-family:Cinzel,Georgia,serif!important;font-weight:500!important;font-size:clamp(11px,1.17vw,18px)!important;line-height:1.07!important;letter-spacing:.035em!important;text-transform:none!important;white-space:normal!important;text-shadow:0 1px 5px #000,0 0 9px #000!important;overflow:visible!important;pointer-events:none!important}
.panel.life .nav-name .nav-text,html[lang=en] .panel.life .nav-name .nav-text{left:34%!important;right:3%!important;width:auto!important;color:#f3d29e!important}
.panel.death .nav-name .nav-text,html[lang=en] .panel.death .nav-name .nav-text{left:4%!important;right:34%!important;width:auto!important;color:#d5e7fa!important}
.panel .nav-item.nav-name::before,html[lang=en] .panel .nav-item.nav-name::before{display:none!important;content:none!important}
@media(max-width:850px){.panel .nav-item.nav-name .nav-text,html[lang=en] .panel .nav-item.nav-name .nav-text{font-size:clamp(8px,1.65vw,13px)!important}}
@media(max-width:530px){.panel .nav-item.nav-name .nav-text,html[lang=en] .panel .nav-item.nav-name .nav-text{font-size:clamp(7px,2.1vw,10px)!important}}

/* 1.1.4: zrcadlově přesná navigace; jednotné písmo pro všechny obrázky v CZ i EN. */
.stage .panel.life,.stage .panel.death{
  width:clamp(156px,17vw,275px)!important;
  max-width:calc(50vw - 16px)!important;
  top:clamp(82px,15dvh,154px)!important;
  opacity:1!important;filter:none!important;
}
.stage .panel.life{left:clamp(7px,2vw,32px)!important;right:auto!important}
.stage .panel.death{right:clamp(7px,2vw,32px)!important;left:auto!important}
.stage .panel.life nav,.stage .panel.death nav{
  display:flex!important;flex-direction:column!important;
  gap:clamp(7px,1.5dvh,16px)!important;
  width:100%!important;
}
.stage .panel .nav-item,.stage .panel.death .nav-item{
  width:100%!important;
  height:clamp(43px,7.2dvh,63px)!important;
  min-height:0!important;
  position:relative!important;display:flex!important;
  padding:0!important;margin:0!important;
  border:0!important;background:none!important;
  border-radius:4px!important;clip-path:none!important;
  overflow:visible!important;
  transform:none!important;filter:none!important;
  isolation:isolate!important;
  transition:transform .18s ease,filter .18s ease!important;
}
.stage .panel .nav-item .nav-art{
  display:block!important;position:absolute!important;
  inset:0!important;width:100%!important;height:100%!important;
  object-fit:fill!important;opacity:1!important;
  filter:none!important;z-index:0!important;
  transition:filter .2s ease!important;
}
.stage .panel .nav-item::before,.stage .panel .nav-item::after{
  content:none!important;display:none!important;
}
.stage .panel .nav-item .nav-text,
html[lang=en] .stage .panel .nav-item .nav-text,
html[lang=en] .stage .panel .nav-item[data-en="CHARACTERS"] .nav-text,
.stage .panel .nav-item.nav-name .nav-text,
html[lang=en] .stage .panel .nav-item.nav-name .nav-text{
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  position:absolute!important;z-index:3!important;
  top:0!important;bottom:0!important;height:100%!important;
  width:49%!important;max-width:49%!important;
  margin:0!important;padding:0 1px!important;
  font-family:Cinzel,Georgia,serif!important;
  font-weight:600!important;
  font-size:clamp(11px,1.05vw,16px)!important;
  line-height:1.15!important;letter-spacing:.02em!important;
  text-transform:none!important;text-align:center!important;
  white-space:normal!important;overflow:visible!important;
  opacity:1!important;visibility:visible!important;
  pointer-events:none!important;
  text-shadow:0 1px 4px #000,0 0 6px #000!important;
}
.stage .panel.life .nav-item .nav-text,
html[lang=en] .stage .panel.life .nav-item .nav-text,
.stage .panel.life .nav-item.nav-name .nav-text,
html[lang=en] .stage .panel.life .nav-item.nav-name .nav-text{
  left:49%!important;right:2%!important;color:#f5d9a6!important;
}
.stage .panel.death .nav-item .nav-text,
html[lang=en] .stage .panel.death .nav-item .nav-text,
.stage .panel.death .nav-item.nav-name .nav-text,
html[lang=en] .stage .panel.death .nav-item.nav-name .nav-text{
  left:2%!important;right:49%!important;color:#d9e9fa!important;
}
.stage .panel .nav-item:is(:hover,:focus-visible){
  transform:scale(1.045)!important;
  outline:none!important;
  filter:drop-shadow(0 0 8px #d2a05a)!important;
}
.stage .panel.death .nav-item:is(:hover,:focus-visible){
  filter:drop-shadow(0 0 10px #80b9f9)!important;
}
.stage .panel .nav-item:is(:hover,:focus-visible) .nav-art{
  filter:brightness(1.48) saturate(1.3) drop-shadow(0 0 6px #f7cf83)!important;
}
.stage .panel.death .nav-item:is(:hover,:focus-visible) .nav-art{
  filter:brightness(1.55) saturate(1.35) drop-shadow(0 0 7px #9fcaff)!important;
}
.stage .panel.life .nav-item:is(:hover,:focus-visible) .nav-text{
  color:#fff6d7!important;text-shadow:0 0 5px #fff,0 0 12px #ffd57b,0 0 22px #ffc064!important;
}
.stage .panel.death .nav-item:is(:hover,:focus-visible) .nav-text{
  color:#fff!important;text-shadow:0 0 5px #fff,0 0 12px #a8d3ff,0 0 23px #78b5ff!important;
}
@media(max-width:850px){
  .stage .panel.life,.stage .panel.death{width:clamp(112px,22vw,190px)!important;top:clamp(68px,13dvh,115px)!important}
  .stage .panel .nav-item,.stage .panel.death .nav-item{height:clamp(32px,6.5dvh,49px)!important}
  .stage .panel .nav-item .nav-text,html[lang=en] .stage .panel .nav-item .nav-text,
  .stage .panel .nav-item.nav-name .nav-text,html[lang=en] .stage .panel .nav-item.nav-name .nav-text{font-size:clamp(8px,1.4vw,12px)!important}
}
@media(max-width:530px){
  .stage .panel.life,.stage .panel.death{width:clamp(95px,29vw,150px)!important;top:clamp(82px,16dvh,125px)!important}
  .stage .panel.life{left:4px!important}.stage .panel.death{right:4px!important}
  .stage .panel.life nav,.stage .panel.death nav{gap:clamp(5px,1.1dvh,10px)!important}
  .stage .panel .nav-item,.stage .panel.death .nav-item{height:clamp(26px,5.2dvh,38px)!important}
  .stage .panel .nav-item .nav-text,html[lang=en] .stage .panel .nav-item .nav-text,
  .stage .panel .nav-item.nav-name .nav-text,html[lang=en] .stage .panel .nav-item.nav-name .nav-text{font-size:clamp(7px,1.9vw,10px)!important;letter-spacing:0!important}
}
@media(max-height:600px) and (min-width:531px){
  .stage .panel.life,.stage .panel.death{top:44px!important}
  .stage .panel .nav-item,.stage .panel.death .nav-item{height:clamp(28px,6.4dvh,37px)!important}
  .stage .panel.life nav,.stage .panel.death nav{gap:clamp(4px,1dvh,8px)!important}
}

/* 1.1.8: identical complete artwork in both languages; no language-specific masking */
html[lang="en"] .stage .panel .nav-item::before,
html[lang="en"] .stage .panel .nav-item::after,
html[lang="cs"] .stage .panel .nav-item::before,
html[lang="cs"] .stage .panel .nav-item::after {content:none!important;display:none!important;background:none!important;}
html[lang="en"] .stage .panel .nav-item .nav-art,
html[lang="cs"] .stage .panel .nav-item .nav-art {object-fit:fill!important;clip-path:none!important;mask:none!important;filter:none!important;width:100%!important;height:100%!important;opacity:1!important;}
.stage .controls {color:#c6ddf3!important;}
.stage .controls>button,.stage .languages button {border:1px solid #587c9e!important;background:#101c2bfa!important;color:#c6ddf3!important;box-shadow:inset 0 0 0 1px #263e54!important;}
.stage .controls>button:hover,.stage .languages button:hover,.stage .controls>button:focus-visible,.stage .languages button:focus-visible {background:#203b55!important;border-color:#91bde7!important;color:#f3faff!important;outline:1px solid #6d9fc6!important;}
.stage .languages button.active {background:#294763!important;border-color:#94bfe7!important;color:#f3faff!important;text-shadow:0 0 7px #9dcaff!important;}
.stage .languages>span {color:#9abbd7!important;}

/* 1.2.3: Nav follows the same active-side state as the backdrop.
   The inactive panel, including its text and decorative art, turns gray.
   Use the panel itself as the single filter target; never override
   its child artwork or hover effects based on language. */
.stage .panel.life,
.stage .panel.death {
  filter: grayscale(1) brightness(.66) !important;
  opacity: .82 !important;
  transition: filter .75s ease, opacity .75s ease !important;
}
.stage[data-active="life"] .panel.life,
.stage[data-active="death"] .panel.death {
  filter: none !important;
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  .stage .panel.life, .stage .panel.death { transition: none !important; }
}