@ font - face{
font - family:LCD2;
src:local ("LCD2"), url (/css - futbol / lcd2 .16 bcf140.woff) format ("woff"),
    url (/css - futbol / lcd2.bcf57c20.ttf) format ("truetype")}

:root{
    background: #141414;
    height:100%;
    display:-webkit-box;
    display:flex;
    -webkit-box-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    align-items:center
}

.field{
    --field-width: 850px;
    --field-height: calc(var(--field-width) / 2);
    --border-width: 4px;
    background-color: green;
    border: var(--border-width) solid #fff;
    width: var(--field-width);
    height: var(--field-height);
    margin: auto;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.field,.zone{ 
	display:-webkit-box; 
	display:flex; 
	-webkit-box-align: center; 
	align-items:center;
}

.zone{height:100%}

.zone.area{
    --area-width:calc (var (--field-width) / 6);
    --area-height:calc (var (--field-height) / 2); 
    width:var (--area-width); 
    height:var (--area-height); 
    border:var (--border-width) solid #fff; 
    border-left: 0;
}


.area{
	display:-webkit-box; 
	display:flex; -webkit-box-align:center; 
	align-items:center;
}

.area.smallarea{
	width: 40%;
	height: 60%;
	border: var(--border-width) solid #fff; 
	border-left: 0;
}

.area{position:relative}

.area:before{
	border: 2px solid #fff;
	width: 4%;
	height: 3%;
	border-radius: 50%;
	left: 67%;
}

.area:after,.area:before{
	content:""; 
	position:absolute;
}

.area:after{
	border: var(--border-width) solid #fff;
	border-radius: 50%;
	width: 100%;
	height: 60%;
	left: 17%;
	-webkit-clip-path: polygon(100% 0,80% 0,80% 100%,100% 100%);
	clip-path: polygon(100% 0,80% 0,80% 100%,100% 100%);
}


.goal{
	border: var(--border-width) solid #fff;
	border-right: 0;
	width: 10%;
	height: 35%;
	position: absolute;
	left: -14%;
}
    
    .zone{position:relative}
    
    .zone.corner{
    	border: var(--border-width) solid #fff;
    	border-radius: 50%;
    	width: 15%;
    	height: 5%;
    	position: absolute;
    	left: -10%;
    	-webkit-clip-path: polygon(100% 50%,100% 100%,50% 100%,50% 50%);
    	clip-path: polygon(100% 50%,100% 100%,50% 100%,50% 50%);
    }
    
    
    .zone.corner.top{
    	top: -3%;
    }
    
    .zone.corner.bottom{
    	bottom:-3%;
    	-webkit-transform: scaleY(-1);
    	transform:scaleY(-1);
    }
    	
    .zone.right{
    	-webkit-transform: scaleX(-1);
    	transform: scaleX(-1);
    }
    
    .middle{
    	border-left: var(--border-width) solid #fff;
    	width: 0;
    }
    
    .middle:before{
    	content: "";
    	border: var(--border-width) solid #fff;
    	border-radius: 50%;
    	width: calc(var(--field-width)*0.15);
    	height:calc(var(--field-width)*0.15);
    	position: absolute;
    	-webkit-transform: translateX(-51%);
    	transform: translateX(-51%);
    }
    
    .middle:after{
    	content:"";
    	border: 2px solid #fff;
    	border-radius: 50%;
    	width: 8px;
    	height: 8px;
    	position:absolute;
    	-webkit-transform: translateX(-65%);
    	transform: translateX(-65%)
    }
    
    .field.normal{background-image: linear-gradient(160deg, transparent, rgba(0,0,0,.65)), repeating-linear-gradient(270deg, green 0,#006400 60px,green 180px)}
    .field.mosaic{background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.13) 0 80px,transparent 80px 140px),repeating-linear-gradient(270deg,#044d04 0 80px,#066606 80px 140px)}
    .field.classic{background-image:repeating-linear-gradient(270deg,#066606 0 60px,#044d04 60px 120px)}
    .field.dry{background-image:linear-gradient(160deg,transparent,rgba(0,0,0,.45)),repeating-linear-gradient(300deg,#7a6b25,#5f501e 60px,#805d29 1200px)}
    .field.circle{background-image:linear-gradient(160deg,transparent,rgba(0,0,0,.45)),repeating-radial-gradient(circle,#097709 0 60px,#076107 60px 140px)}
    
    .info-panel{position:absolute;bottom:0;left:0;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;padding:20px 0;background:rgba(0,0,0,.8)}
    .info-panel kbd{color:#fff;background:#888;border:2px outset #aaa;font-size:18px;padding:5px;margin-left:25px}.info-panel span{font-family:Lato,sans-serif;color:#fff;padding-left:10px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}
    .info-panel span:before{color:#a9a9a9;content:"Change "}
    
    .field{position:relative}
    
    .field.playable{position:absolute;width:100%;height:100%}
    
    .player{--player-width:calc(var(--field-width)/15);width:var(--player-width);height:var(--player-width);background:grey;border:var(--border-width) solid #fff;border-radius:50%;box-shadow:inset 4px 4px 14px rgba(0,0,0,.5),4px 4px 10px rgba(0,0,0,.5)}
    .numbers.player:before{content:attr(data-number);font-family:Montserrat,sans-serif;font-weight:700;font-size:calc(var(--player-width)/2);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}
    .tenerife.player{background:#000 -webkit-gradient(linear,left top,left bottom,color-stop(60%,#fff),color-stop(60%,#00f),color-stop(90%,rgba(0,0,255,.33)));background:#000 linear-gradient(#fff 60%,#00f 0,rgba(0,0,255,.33) 90%)}
    .barC'a.player{background:-webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(60%,#0a2455)),repeating-linear-gradient(90deg,#1d3b71 0 20%,#8f1d2a 20% 40%);background:linear-gradient(180deg,transparent 0 60%,#0a2455 60%),repeating-linear-gradient(90deg,#1d3b71 0 20%,#8f1d2a 20% 40%)}
    .barC'a.player:before{color:#ff0}
    .realmadrid.player{background:#fff -webkit-gradient(linear,left top,left bottom,color-stop(60%,#fff),color-stop(60%,#000),color-stop(64%,#fff));background:#fff linear-gradient(180deg,#fff 60%,#000 0 61%,#fff 64%)}
    .spain.player{background:-webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(60%,#035781)),-webkit-gradient(linear,left top,right top,color-stop(5%,#f31f2d),color-stop(10%,#eebe4f),color-stop(16%,#84485f),color-stop(22%,#f31f2d));background:linear-gradient(180deg,transparent 0 60%,#035781 60%),linear-gradient(90deg,#f31f2d 5% 10%,#eebe4f 10% 16%,#84485f 16% 22%,#f31f2d 22% 40%)}
    .atleti.player{background:-webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(60%,#202669)),repeating-linear-gradient(90deg,#a40f23 0 20%,#fff 20% 40%);background:linear-gradient(180deg,transparent 0 60%,#202669 60%),repeating-linear-gradient(90deg,#a40f23 0 20%,#fff 20% 40%)}
    .atleti.player:before{text-shadow:0 0 4px #fff}
    
    .player.goalkeeper{background-image:-webkit-gradient(linear,left top,left bottom,color-stop(60%,#111),color-stop(60%,#888));background-image:linear-gradient(#111 60%,#888 0)}
    .player.goalkeeper:before{color:#eee}

    .pacman.player{border:0 solid #000}.pacman .player:before{content:"*"}
    .pacman.player:not(.goalkeeper){background:transparent;-webkit-animation:wakawaka .4s linear infinite;animation:wakawaka .4s linear infinite}
    
    @-webkit-keyframes wakawaka{0%{background-image:conic-gradient(from 60deg,transparent 0 18%,#ff0 18%)}to{background-image:conic-gradient(from 60deg,#ff0 0 360%)}}
    
    @keyframes wakawaka{0%{background-image:conic-gradient(from 60deg,transparent 0 18%,#ff0 18%)}to{background-image:conic-gradient(from 60deg,#ff0 0 360%)}}
    
    .playable{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}
    
    .playable.player{margin:5px}
    
    [data-formation]{display:grid;justify-content:space-around;-webkit-box-align:center;align-items:center}
    [data-formation=initial]{display:-webkit-box;display:flex}
    
    .p1{grid-area:a}.p2{grid-area:b}.p3{grid-area:c}.p4{grid-area:d}.p5{grid-area:e}.p6{grid-area:f}.p7{grid-area:g}.p8{grid-area:h}.p9{grid-area:i}.p10{grid-area:j}.p11{grid-area:k}
    
    [data-formation="1-2-6-2"]{grid-template-areas:". . d g ." ". b . . j" "a . e h ." ". c . . k" ". . f i ."}
    [data-formation="1-3-4-3"]{grid-template-areas:". b . . i" ". . e g ." "a c . . j" ". . f h ." ". d . . k"}
    [data-formation="1-5-2-3"]{grid-template-areas:". b . . i" ". c . . ." "a d g h j" ". e . . ." ". f . . k"}
    [data-formation="1-3-2-5"]{grid-template-areas:". b . . g" ". . e . h" "a c . . i" ". . f . j" ". d . . k"}
    [data-formation="1-5-1-4"]{grid-template-areas:". . b . . h" ". c . . . ." "a d . g i j" ". e . . . ." ". . f . . k"}
    [data-formation="1-5-5-def"]{grid-template-areas:". b . g" ". c . h" "a d . i" ". e . j" ". f . k";grid-template-columns:repeat(7,1fr)}body{overflow:hidden}
    
    #app{-webkit-perspective:150px;perspective:150px;-webkit-perspective-origin:bottom;perspective-origin:bottom}
    
    .field{--field-rotate-x:0deg;--field-rotate-z:0deg;--field-scale:1;--player-translate-z:2px;-webkit-transform:rotateX(var(--field-rotate-x)) rotate(var(--field-rotate-z)) scale(var(--field-scale));transform:rotateX(var(--field-rotate-x)) rotate(var(--field-rotate-z)) scale(var(--field-scale));-webkit-transition:-webkit-transform .2s linear;transition:-webkit-transform .2s linear;transition:transform .2s linear;transition:transform .2s linear,-webkit-transform .2s linear;will-change:transform}
    
    .field,.playable{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
    
    .player{-webkit-transform:translateZ(var(--player-translate-z)) rotateX(calc(var(--field-rotate-x)*-1));transform:translateZ(var(--player-translate-z)) rotateX(calc(var(--field-rotate-x)*-1));-webkit-transition:-webkit-transform .25s linear;transition:-webkit-transform .25s linear;transition:transform .25s linear;transition:transform .25s linear,-webkit-transform .25s linear;will-change:transform}
    
    @media screen and (min-width:700px) and (max-width:1100px){
        #app.field{--field-width:700px;--field-rotate-z:-90deg;--border-width:3px}
        #app.player{-webkit-transform:rotate(90deg) translateZ(var(--player-translate-z)) rotateX(calc(var(--field-rotate-x)*-1));transform:rotate(90deg) translateZ(var(--player-translate-z)) rotateX(calc(var(--field-rotate-x)*-1))}
    }
    
    .player{-webkit-transition:-webkit-transform .75s;transition:-webkit-transform .75s;transition:transform .75s;transition:transform .75s,-webkit-transform .75s}
    
    .field{-webkit-transition:-webkit-transform .25s;transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s}
    
    @media screen and (max-width:700px){
        .playable{flex-wrap:wrap}
        .field{--field-width:400px;--field-height:250px;--border-width:2px}
    }
    
    .player{--player-energy:100;--player-energy-color:#ff0}
    .player:hover.attrs{opacity:1;-webkit-transition:opacity .5s ease 0s;transition:opacity .5s ease 0s}
    
    .player:hover.attrs.fill{width:var(--player-energy)}
    
    .attrs{position:absolute;width:var(--player-width);-webkit-transform:translateY(-52px);transform:translateY(-52px);color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;opacity:0;-webkit-transition:opacity .5s ease .15s;transition:opacity .5s ease .15s}
    .attrs.life{width:100%;height:10px;background:#000;box-shadow:0 0 10px rgba(0,0,0,.5);border-radius:10px;overflow:hidden}
    
    .attrs.life.fill{background:var(--player-energy-color);width:0;-webkit-transition:width .5s ease;transition:width .5s ease;height:100%}
    
    .playable.player{background-size:cover}
    .playable.player:hover:before{opacity:0}


/*# sourceMappingURL=/css-futbol/src.745b0272.css.map */