.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}:fullscreen{overflow-y:auto}.App-header{align-items:center;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.winner{color:green}.loser{color:red}.draw{color:blue}.card-container{perspective:2000px}.card{cursor:pointer;height:150px;position:relative;transform-style:preserve-3d;width:100px}.card .card-img{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}.card .card-img-front{transform:rotateY(0deg)}.card .card-img-back,.card .card-img-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-repeat:no-repeat;background-size:contain;width:100px}.card .card-img-back{filter:grayscale(100%);transform:rotateY(180deg)}.rotate{animation:rotateAnimation 4s linear infinite}@keyframes rotateAnimation{0%{transform:rotateY(270deg)}to{transform:rotateY(630deg)}}.img1{z-index:1}.img1,.img2{left:0;position:relative;top:0};.img2{z-index:2};*,:after,:before{box-sizing:border-box}:root{--color1:#1e90ff;--color2:#fff;--color:grey;--sectionratio:2;--backgroundimage:"";--fullheight:1080px;--fullwidth:1920px}.simplebar{height:60px;width:800px}.simplebar,.simplesidebar{color:#fff;left:0;margin:0;position:absolute;text-align:center;top:0}.simplesidebar{height:1080px;height:var(--fullheight);width:384px;width:calc(var(--fullwidth)/5);z-index:1}.playertop{background-image:linear-gradient(180deg,#000,#1e90ff,#1e90ff,#000);background-image:linear-gradient(to bottom,#000,var(--color1),var(--color1),#000);top:0}.blankSection{background:#000;top:540px;top:calc(var(--fullheight)/var(--sectionratio))}.playerbottom{background-image:linear-gradient(180deg,#000,#fff,#fff,#000);background-image:linear-gradient(to bottom,#000,var(--color2),var(--color2),#000);bottom:0}.blankSection,.playerSection{border-collapse:collapse;box-sizing:border-box;display:block;width:384px;width:calc(var(--fullwidth)/5)}.blankSection,.playerSection,.playerSection .factionImage{height:540px;height:calc(var(--fullheight)/var(--sectionratio));position:absolute}.playerSection .factionImage{left:0;object-fit:contain;opacity:.2;top:0;width:inherit;z-index:1}.playerSection table,.playerSection table *{position:relative;z-index:5}@keyframes rotate{to{transform:rotate(1turn)}}.borderspin{align-items:center;border-radius:10px;display:flex;font-family:sans-serif;font-weight:700;justify-content:center;overflow:hidden;padding:2rem;position:absolute;z-index:0;&:before{animation:rotate 10s linear infinite;background-image:linear-gradient(#fff,#000,grey,#000,grey,#000,#fff);background-image:linear-gradient(#fff,#000,var(--color),#000,var(--color),#000,#fff);background-position:0 0,100% 0,100% 100%,0 100%;background-repeat:no-repeat;background-size:50% 50%,50% 50%;height:200%;left:-50%;top:-50%;width:200%}&:after,&:before{content:"";position:absolute;z-index:0}&:after{background:linear-gradient(180deg,#000,grey,grey,#000);background:linear-gradient(to bottom,#000,var(--color),var(--color),#000);background-color:initial;border-radius:5px;height:calc(100% - 16px);left:8px;top:8px;width:calc(100% - 16px)}}.card-container{cursor:pointer;perspective:1000px}.card-inner{height:100%;position:relative;text-align:center;transform-style:preserve-3d;transition:transform .6s;width:100%}.card-container.flipped .card-inner{transform:rotateY(180deg)}.card-face{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:8px;box-shadow:0 4px 8px #0003;display:flex;justify-content:center;position:absolute;width:100%}.card-back{transform:rotateY(180deg)}body{clip:auto,;all:initial,;animation:none 0s ease 0s 1 normal none running,;-webkit-backface-visibility:visible,;backface-visibility:visible,;background:#0000 none repeat 0 0/auto auto padding-box border-box scroll,;border:none;border-collapse:separate,;border-image:none,;border-radius:0,;border-spacing:0,;bottom:auto,;box-shadow:none,;box-sizing:content-box,;caption-side:top,;clear:none,;color:#000,;column-fill:balance,;column-gap:normal,;column-rule:medium none currentColor;column-span:1,;columns:auto, auto,;content:normal,;counter-increment:none,;counter-reset:none,;cursor:auto,;direction:ltr,;display:inline,;empty-cells:show,;float:none,;font-family:serif;font-size:medium,;font-stretch:normal,;font-style:normal,;font-variant:normal,;font-weight:normal,;height:auto,;-webkit-hyphens:none,;hyphens:none,;left:auto,;letter-spacing:normal,;line-height:normal,;list-style:disc none outside;margin:0,;max-height:none,;max-width:none,;min-height:0,;min-width:0,;opacity:1,;orphans:2,;outline:medium none invert;overflow:visible,;overflow-x:visible,;overflow-y:visible,;padding:0,;page-break-after:auto,;page-break-before:auto,;page-break-inside:auto,;perspective:none,;perspective-origin:50% 50%,;position:static,;right:auto,;tab-size:8,;table-layout:auto,;text-align:left,;text-align-last:auto,;-webkit-text-decoration:none,;text-decoration:none,;text-indent:0,;text-shadow:none,;text-transform:none,;top:auto,;transform:none,;transform-origin:50% 50% 0,;transform-style:flat,;transition:none 0s ease 0s;unicode-bidi:normal,;vertical-align:baseline,;visibility:visible,;white-space:normal,;widows:2,;width:auto,;word-spacing:normal,;z-index:auto,}table{border-spacing:2px;margin-top:-2px}td{font-weight:600;padding:"0px";text-shadow:#000 -1px -1px 0,#000 1px -1px 0,#000 -1px 1px 0,#000 1px 1px 0;white-space:nowrap}