@font-face{font-family:DIN2014;src:url(/assets/DIN2014-C-3glesw.ttf)}@font-face{font-family:DIN2014;src:url(/assets/DIN2014Bold-x9fE1DB4.ttf);font-weight:700}@font-face{font-family:DIN2014Stencil;src:url(/assets/PFDinStencilW01Bold-DN4fnR2V.ttf);font-weight:700}:root{--portraitSize: 8vw;--portraitMini: url(/src/assets/commander/mini-portrait/HenkPropper_mini.png);--portraitBig: url(/src/assets/commander/mini-portrait/HenkPropper_mini.png);font-family:DIN2014,sans-serif;color:#f1f1f1;-webkit-user-select:none;user-select:none}@media (max-width: 1024px){:root{--portraitSize: 9vw}}body{margin:0;padding:0}#app{display:flex;text-align:center;flex-direction:column;margin:0;padding:0;width:100vw;height:100vh;background-image:url(/assets/Skin%20selector%20list-DC92_nnY.png);background-size:contain;background-repeat:no-repeat;overflow:hidden;position:relative}#bg{width:100%;height:100%;display:block;position:absolute;z-index:0;left:0;top:0}#infoBlock,#commanderBlock{display:flex;flex-direction:row;justify-content:start;width:100%;height:100%;z-index:1}#commanderBlock{flex:.84}#infoBlock{z-index:5;flex:.16}#commanderInfo,#PlayerInfo{width:100%;height:100%}#commanderInfo{display:flex;align-items:center;justify-content:start;padding-top:.6em;color:#fecb66;flex:.4;white-space:nowrap}#commanderInfo:before{content:"";padding-left:2vw}#commanderInfo .level{font-weight:700;font-size:5.5vmin;padding-right:2%}#commanderInfo .rankBlock{display:flex;flex-direction:column;justify-content:start;align-items:start;line-height:1;padding-left:2%}#commanderInfo .name,#commanderInfo .rank{font-weight:700;text-transform:uppercase}#commanderInfo .name{font-family:DIN2014Stencil;text-align:left;font-size:5vmin;height:5vmin;line-height:5vmin}#commanderInfo .name.shortName{font-size:4.5vmin}#commanderInfo .rank{font-size:1.8em;color:#b99753;letter-spacing:1px;font-size:2.8vmin}#commanderInfo .badge{height:66%;aspect-ratio:2/5;overflow:hidden}#commanderInfo .badge img{width:100%;height:100%;object-fit:contain}#PlayerInfo{flex:.6;display:flex;flex-direction:row;justify-content:start;align-items:center;font-weight:700;font-size:2.3vmin;line-height:0;gap:.9em;padding-top:.3em}#PlayerInfo span{display:flex;flex-direction:row;align-items:center;height:1em;gap:.1em;white-space:nowrap;text-transform:uppercase}#PlayerInfo span .ico img{width:auto;height:1em}#PlayerInfo span.new{position:relative}#PlayerInfo span.new:before{content:"";width:2em;height:.9em;--p: .3em;aspect-ratio:3/2;clip-path:polygon(var(--p) 0,100% 0,calc(100% - var(--p)) 100%,0 100%);background:#af3634;position:absolute;top:-.6em;right:-.9em}#PlayerInfo span.new:after{content:"NEW";width:2em;height:.9em;--p: .3em;aspect-ratio:3/2;color:#f1f1f1;font-size:.6em;position:absolute;top:-.25em;right:-.85em}#PlayerInfo span.gold,#PlayerInfo span.premium{color:#fecb66}#PlayerInfo span.freeXp{color:#b3ffc7}#PlayerInfo span.freeXp img{margin-top:-.1em}#PlayerInfo span.premium img,#PlayerInfo span.lootBox img{height:1.2em}#PlayerInfo .separator{background:#f1f1f1;width:.1em;height:80%;max-height:65px;margin:0 10px}#PlayerInfo .playerBlock{margin-left:-15px;display:flex;flex-direction:row;align-items:center}#PlayerInfo .playerBlock .avatar img{max-height:70px;height:100%;width:auto}#PlayerInfo .nickname{font-size:.8em}#PlayerInfo:before{content:"";padding:0}@keyframes fadeIn{0%{opacity:0%;background-position:40% 100%}to{opacity:100%;background-position:50% 100%}}@keyframes fadeOut{0%{opacity:100%;background-position:50% 100%}to{opacity:0%;background-position:40% 100%}}.fadeIn{animation:fadeIn .15s ease-in-out forwards}.fadeOut{animation:fadeOut .15s ease-in-out forwards}#CommanderDescription{flex:.6;padding-top:7vh}#CommanderDescription .scrollBlock{width:10vw;height:100vh;position:absolute;top:0;-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 20%,rgb(0,0,0) 80%,rgba(0,0,0,0) 95%);mask-image:linear-gradient(0deg,#0000,#000 20% 80%,#0000 95%);overflow-y:hidden;overflow-x:hidden;overscroll-behavior:contain}#CommanderDescription .scrollBlock .scrollContainer{padding-top:22vh;max-height:100%;overflow-y:hidden;cursor:pointer}#CommanderDescription .scrollBlock .scrollContainer:before{content:"";border:1px solid #2c343f;position:absolute;width:100%;top:calc(22vh + var(--portraitSize) + 1em);z-index:-5}#CommanderDescription .scrollBlock .scrollContainer .portrait{width:var(--portraitSize);height:var(--portraitSize);display:inline-block;background-position:center center;position:relative}#CommanderDescription .scrollBlock .scrollContainer .portrait .image{display:inline-block;transition:left .3s,width .15s,height .15s;width:calc(var(--portraitSize) - 2em);height:calc(var(--portraitSize) - 2em);background:var(--portraitMini);background-repeat:no-repeat;background-size:contain;position:absolute;left:-3px;bottom:0}#CommanderDescription .scrollBlock .scrollContainer .portrait:before{content:"";transition:box-shadow .3s,width .15s,height .15s;transition-timing-function:ease-in-out;width:calc(var(--portraitSize) - 3em);height:calc(var(--portraitSize) - 3em);border:2px solid white;position:absolute;z-index:-1;bottom:0;left:0}#CommanderDescription .scrollBlock .scrollContainer .portrait:after{content:"";transition:width .15s,height .15s;transition-timing-function:ease-in-out;width:calc(var(--portraitSize) - 3em);height:calc(var(--portraitSize) - 3em);border:0;border-bottom:2px solid white;position:absolute;bottom:0;left:0;z-index:1}#CommanderDescription .scrollBlock .scrollContainer .portrait.active .image{transition:left .3s,width .15s,height .15s;display:inline-block;width:var(--portraitSize);height:var(--portraitSize);left:-1px}#CommanderDescription .scrollBlock .scrollContainer .portrait.active:before{transition:box-shadow .3s,width .15s,height .15s;transition-timing-function:ease-in-out;width:calc(var(--portraitSize) - 18px);height:calc(var(--portraitSize) - 22px);border:4px solid #f1f1f1;box-shadow:0 0 10px 5px #ffffffbf;-webkit-box-shadow:0px 0px 10px 5px rgba(255,255,255,.75);-moz-box-shadow:0px 0px 10px 5px rgba(255,255,255,.75)}#CommanderDescription .scrollBlock .scrollContainer .portrait.active:after{transition:width .15s,height .15s;transition-timing-function:ease-in-out;width:calc(var(--portraitSize) - 10px);height:calc(var(--portraitSize) - 10px);border:0;border-bottom:4px solid #f1f1f1}#CommanderDescription .commanderTextBlock{display:flex;justify-content:start;padding-left:11.5vw;flex-direction:column;align-items:start;font-weight:700;text-align:left;padding-right:5vw;font-size:1.35vmin}#CommanderDescription .commanderTextBlock .commanderDescriptionBlock{color:#f1f1f1}#CommanderDescription .commanderTextBlock .inStock{text-transform:uppercase}#CommanderDescription .commanderTextBlock .inStock .block{color:#020f1c;background-color:#f1f1f1;padding:.3em 1.2em;font-size:1.1em;font-weight:700;margin-right:1em}#CommanderDescription .commanderTextBlock .inStock .text{font-size:1.3em;color:#94979c}#CommanderDescription .commanderTextBlock h1{text-transform:uppercase;font-size:2.8em;margin-top:.6em;margin-bottom:.4em}#CommanderDescription .commanderTextBlock .description{width:100%;color:#94979c}#CommanderDescription .commanderTextBlock .description .text{color:#f1f1f1;margin:0 0 1em;font-size:1.35em}#CommanderDescription .commanderTextBlock .description .textBlock{padding-left:1.3em;border-top:3px solid #2c343f;margin-top:-3px}#CommanderDescription .commanderTextBlock .description .textBlock p{font-size:1.45em;font-weight:400;line-height:1.3em;margin-top:.45em}#CommanderDescription .commanderTextBlock .description .textBlock .guises{display:flex;flex-direction:row}#CommanderDescription .commanderTextBlock .description .textBlock .guises h2{text-transform:uppercase;color:#f1f1f1;margin:0}#CommanderDescription .commanderTextBlock .description .textBlock .guises p{margin:0;line-height:1em}#CommanderDescription .commanderTextBlock .description .textBlock .guises .national,#CommanderDescription .commanderTextBlock .description .textBlock .guises .general{display:grid;grid-template-columns:3.6em 1fr;grid-template-rows:repeat(2,1.75em);grid-column-gap:0px;grid-row-gap:0px;flex:1}#CommanderDescription .commanderTextBlock .description .textBlock .guises .national p,#CommanderDescription .commanderTextBlock .description .textBlock .guises .general p{font-size:1.2em;line-height:1.2em}#CommanderDescription .commanderTextBlock .description .textBlock .guises .national img,#CommanderDescription .commanderTextBlock .description .textBlock .guises .general img{width:auto;height:3.5em}#CommanderDescription .commanderTextBlock .description .textBlock .guises .national .div1,#CommanderDescription .commanderTextBlock .description .textBlock .guises .general .div1{grid-area:1/1/3/2}#CommanderDescription .commanderTextBlock .description .textBlock .guises .national .div2,#CommanderDescription .commanderTextBlock .description .textBlock .guises .general .div2{grid-area:1/2/2/3}#CommanderDescription .commanderTextBlock .description .textBlock .guises .national .div3,#CommanderDescription .commanderTextBlock .description .textBlock .guises .general .div3{grid-area:2/2/3/3}#CommanderDescription .commanderTextBlock .type{background:#2c343f;text-transform:uppercase;display:inline-block;font-size:1.45em;padding:.2em 1em;color:#f1f1f1;font-size:1.25em}.spacer{height:var(--portraitSize);opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}#CommanderAvatar{background-image:var(--portraitBig);background-size:contain;background-repeat:no-repeat;background-position:50% 100%;flex:.4;display:flex;flex-direction:column;justify-content:end}#CommanderAvatar img{width:98%;height:auto;object-fit:contain}@media (max-width: 1024px){#infoBlock{flex:.2}#infoBlock #commanderInfo{padding:0}#commanderBlock{flex:.8}#CommanderDescription{flex:.65;padding-top:0}#CommanderDescription .scrollBlock{width:11vw;font-size:2vmin}#CommanderDescription .scrollBlock .scrollContainer{padding-top:0;padding-top:13vh}#CommanderDescription .scrollBlock .scrollContainer:before{top:calc(13vh + var(--portraitSize) + 1em)}#CommanderDescription .commanderTextBlock{font-size:2.35vmin}#CommanderAvatar,#commanderInfo{flex:.35}#PlayerInfo{padding:0;flex:.65;font-size:3.7vmin}#PlayerInfo .playerBlock .avatar img{max-height:50px}}