*{box-sizing:border-box;margin:0;padding:0}.no-script{background-color:#000;display:grid;height:100%;place-items:center;position:fixed;width:100%;z-index:10000}.no-script__text{color:#ddd;font-size:8vmin;text-align:center}body{background-color:#eee;font-family:Lato,sans-serif;font-size:1rem}body:after{content:url(images/info-button-animated.webp);height:1px;left:0;opacity:.00001;position:fixed;top:0;width:1px;z-index:-99999999}button{border:none;font-family:inherit;font-size:inherit;outline:none}.background{--image-url:url();background-image:var(--image-url);background-position:50%;background-repeat:no-repeat;background-size:cover;filter:contrast(110%);height:100vh;left:0;position:fixed;top:0;width:100%;z-index:-999999}.header{align-items:center;display:flex;font-size:1rem;justify-content:space-between;padding-left:.5em;padding-right:.6em;padding-top:.2em;position:relative}.header__title{color:#fff;font-family:Pacifico;font-size:1.4em;text-shadow:0 0 .75em hsla(0,0%,5%,.3);user-select:none}.button-img{background-color:transparent;background-position:50%;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 0 .25em rgba(5%,5%,5%,.3)) drop-shadow(0 0 .05em rgba(5%,5%,5%,.6));height:2.6em;margin-left:.2em;margin-right:.2em;width:2.6em}.button-img:hover{cursor:pointer}.button-img-up{background-image:url(images/up.svg)}.button-img-down{background-image:url(images/down.svg)}.button-img-swap{background-image:url(images/swap.svg)}.button-img-random{background-image:url(images/random.svg);filter:drop-shadow(0 0 .25em rgba(5%,5%,5%,.2)) drop-shadow(0 0 .05em rgba(5%,5%,5%,.5))}.button-img-screenshot{background-image:url(images/screenshot.svg)}.name{word-break:break-word}.main{display:flex;flex-wrap:wrap;justify-content:space-around;width:100%}.talent-select-container{flex-basis:46%}.box{color:#fff;margin:.25em;padding:.25em;text-shadow:0 0 .3em rgba(0,0,0,.6),0 0 .2em rgba(0,0,0,.4)}.talent-select-box-1{margin-right:0}.talent-select-box-2{margin-left:0}.talent-select-content{align-items:center;display:flex;flex-direction:column;height:100%;width:100%}.talent-select-image{--image-url:url();background-color:#fff;background-image:var(--image-url);background-position:50%;background-size:cover;border-radius:8px;padding-top:100%;width:100%}.talent-select-image:hover{cursor:pointer}.talent-select-image.dropdown-visible{border-bottom-left-radius:0;border-bottom-right-radius:0}.talent-select-name{font-weight:500;min-height:2.05em;text-align:center;user-select:none}.talent-select-name.dropdown-visible{visibility:hidden}.talent-select-name__name:hover{cursor:pointer}.talent-dropdown{align-self:start;position:relative;visibility:hidden;width:100%;z-index:500}.talent-dropdown.dropdown-visible{visibility:visible}.talent-dropdown-content{background-image:linear-gradient(hsla(0,0%,95%,.9),hsla(0,0%,85%,.85));border-bottom-left-radius:8px;border-bottom-right-radius:8px;position:absolute;width:100%;z-index:100}.talent-dropdown-entries{margin-bottom:.5em;margin-top:.5em;max-height:25em;overflow-y:auto;position:relative}.talent-dropdown-entries__entry{align-items:center;display:flex;padding:.2em .2em .2em .4em;user-select:none}.talent-dropdown-entries__entry:hover{background-color:hsla(0,0%,95%,.4)}.talent-dropdown-entries__entry--highlighted{background-color:hsla(0,0%,100%,.6)}.talent-dropdown-entries__entry__image{--image-url:url();background-color:#fff;background-image:var(--image-url);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:.2em;flex-shrink:0;height:2.5em;margin-right:.4em;width:2.5em}.talent-dropdown-entries__entry__name{font-size:1em;overflow:hidden;text-overflow:ellipsis}.talent-select-button-imgs{display:flex}.talent-select-button-imgs.dropdown-visible{visibility:hidden}.result-box{align-items:center;display:flex;flex-basis:70%;flex-direction:column;order:3}.result-canvas{animation-duration:.2s;animation-fill-mode:forwards;animation-name:result-canvas-loading-delay;animation-timing-function:linear;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:40%;border-radius:8px;width:100%}.result-button-imgs{align-items:center;display:flex;justify-content:center;position:relative;width:100%}.result-button-imgs .button-img{height:3.1em;width:3.1em}.result-button-imgs__screenshot{display:grid;font-size:.8em;place-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);visibility:hidden}.result-name{font-size:1.5em;font-weight:600;letter-spacing:-.02em;min-height:2.5em;text-align:center}.info-button{animation-duration:2s;animation-iteration-count:infinite;animation-name:info-button-anim;animation-play-state:paused;animation-timing-function:linear;backface-visibility:hidden;background-color:transparent;background-image:url(images/info-button.webp);background-position:50%;background-repeat:no-repeat;background-size:contain;height:2.5em;width:2.5em;z-index:1000}.info-button:hover{animation-play-state:running;background-image:url(images/info-button-animated.webp);cursor:pointer}.info{animation-fill-mode:forwards;background-color:#f5f5f5;border-radius:10px;box-shadow:0 0 7vmin rgba(0,0,0,.9);color:#1a1a1a;left:50%;opacity:0;padding:2.2em .6em .6em;position:fixed;top:50%;transform:translate(-50%,-50%) scale(1);user-select:none;visibility:hidden;width:80vw;z-index:900}.info__inner{max-height:60vh;overflow:auto;padding-bottom:1em;width:100%}.info__close{background-color:transparent;background-image:url(images/info-close.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;height:2em;position:absolute;right:.2em;top:.2em;width:2em}.info__close:hover{cursor:pointer}.info h1:not(:first-child){margin-top:.8em}.info .background-button{background-color:inherit;border:1px solid rgba(0,0,0,.2);border-radius:.3em;font-weight:700;margin:.5em .1em 0;padding:.7em .8em}.info .background-button:hover{background-color:#e6e6e6}.info .background-button:active{background-color:#d9d9d9}.info ul{padding-left:1.3em}.info ul ul{padding-left:1em}.info li{line-height:1.3em}.info li li{list-style-type:"–  "}.info a{color:#4d4d4d;font-weight:700}.info--in{animation-name:info-in;user-select:auto}.info--in,.info--out{animation-duration:.2s}.info--out{animation-name:info-out}@keyframes info-button-anim{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes info-in{0%{opacity:0;transform:translate(-50%,-50%) scale(1.3);visibility:visible}to{opacity:1;transform:translate(-50%,-50%) scale(1);visibility:visible}}@keyframes info-out{0%{opacity:1;visibility:visible}to{opacity:0;transform:translate(-50%,-50%) scale(.8);visibility:hidden}}@keyframes result-canvas-loading-delay{0%{background-image:url()}99%{background-image:url()}to{background-image:url(images/loading-indicator.webp)}}@media (max-aspect-ratio:9/16){.header{margin-bottom:.25em}.talent-select-container{flex-basis:48%}.result-box{flex-basis:80%;margin-top:1em}}@media (min-aspect-ratio:0.57),(min-width:450px),(orientation:landscape){:root{--max-width:1200px;--min-width:600px;--perspective-angle:5deg}.header{min-width:var(--min-width);padding-right:.8em}.header__title{font-size:2em}.info-button{height:3em;width:3em}.main{align-items:center;bottom:0;flex-wrap:nowrap;justify-content:center;left:0;margin:auto;max-width:var(--max-width);min-width:var(--min-width);position:absolute;right:0;top:0}.box{margin:0;padding:0}.talent-select-container{flex-basis:60%;flex-grow:1;margin:auto;perspective:max(calc(900px - 60vw),200px)}.talent-select-container-1{margin-left:1em;order:1}.talent-select-container-2{margin-right:1em;order:3}.talent-select-box-1{transform:rotateY(var(--perspective-angle))}.talent-select-box-2{transform:rotateY(calc(var(--perspective-angle)*-1))}.talent-select-name{font-size:1.5em}.talent-dropdown-content{background-color:unset;background-image:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,90%,.05))}.talent-dropdown-entries{max-height:15em}.talent-dropdown-entries__entry{padding:.2em .2em .2em .8em}.talent-dropdown-entries__entry--highlighted{background-color:unset;background-image:linear-gradient(90deg,hsla(0,0%,100%,.8) 2%,transparent 0)}.talent-dropdown-entries__entry__image{height:2em;margin-right:.4em;width:2em}.talent-dropdown-entries__entry__name{font-size:1em;white-space:nowrap}.button-img{height:2.4em;margin-left:.15em;margin-right:.15em;width:2.4em}.result-box{flex-basis:100%;flex-grow:1;margin:auto 2em;order:2}.result-button-imgs .button-img{height:3em;width:3em}.result-name{font-size:2.5em;min-height:2.4em}.info{max-width:60ch;padding-left:1em}.info ul{padding-left:1.7em}.info ul ul{padding-left:1.4em}}